當(dāng)前位置：首頁 >

JS 原生实现复选框全选反选功能

發(fā)布時(shí)間：2023/12/31 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS 原生实现复选框全选反选功能小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

JS 原生實(shí)現(xiàn)復(fù)選框全選反選功能

按鈕功能實(shí)現(xiàn)思路：
全選按鈕：直接將全選按鈕的狀態(tài)賦值給每一個(gè) 復(fù)選框。
復(fù)選框：只有當(dāng)所有的復(fù)選框選中時(shí)，全選按鈕才能選中，所以每當(dāng)復(fù)選框每點(diǎn)擊一次就要檢測所有的復(fù)選框有沒有選中，本方法是設(shè)置一個(gè)開關(guān)flag ，來篩選出復(fù)選框都選中的情況。
反選按鈕功能：直接將此時(shí)按鈕的狀態(tài)取反即可。

<body><input type="checkbox" id="checkbox">全選 <input type="button" id="btn" value="反選"><br /><input type="checkbox" class="inp"> 張三<br /><input type="checkbox" class="inp"> 李四 <br /><input type="checkbox" class="inp"> 王五<script>let checkbox = document.getElementById('checkbox'); //全選按鈕let btn = document.getElementById('btn'); //反選按鈕let inp = document.querySelectorAll('.inp'); // 小按鈕// 設(shè)置全選checkbox.onclick = function () {for (var i = 0; i < inp.length; i++) {inp[i].checked = this.checked; // 這個(gè)里的是將全選按鈕的狀態(tài)賦值給所有的inp }};// 設(shè)置小按鈕// 要個(gè)每一個(gè)按鈕都要綁定點(diǎn)擊事件所以需要循環(huán) ， for (let i = 0; i < inp.length; i++) {inp[i].onclick = function () {let flag = true;// 每點(diǎn)擊一個(gè)小按鈕就要檢測所有的小按鈕是否都全選了設(shè)置了一個(gè) 開關(guān)for (let i = 0; i < inp.length; i++) {if (!inp[i].checked) {flag = false;}}checkbox.checked = flag;}};// 反選btn.onclick = function (){for(let i = 0 ; i < inp.length ; i++){if(inp[i].checked){inp[i].checked = false;checkbox.checked = false;}else{inp[i].checked = true; checkbox.checked = true;}}};</script> </body>

實(shí)現(xiàn)復(fù)選框還有另外一種更加簡便的方法：

功能實(shí)現(xiàn)思路：當(dāng)復(fù)選框的選中個(gè)數(shù) 等于復(fù)選框的個(gè)數(shù) 時(shí) ，代表復(fù)選框已經(jīng)全部選中，就要將全選按鈕選中。

for (var i = 0; i < inp.length; i++) {inp[i].onclick = function () {let Select = document.querySelectorAll('.inp:checked').length; // 獲得此時(shí)選中的復(fù)選框的數(shù)量//復(fù)雜點(diǎn)寫法： // if (Select == inp.length) { // 判斷：復(fù)選框選中的個(gè)數(shù) 是否等于復(fù)選框的個(gè)數(shù) ，返回值 true / false// checkbox.checked = true;// } else {// checkbox.checked = false;// };//簡便寫法：checkbox.checked = Select == inp.length; // 直接將判斷復(fù)選框選中的個(gè)數(shù) 是否等于復(fù)選框的個(gè)數(shù)的結(jié)果賦值給全選按鈕}};

總結(jié)

以上是生活随笔為你收集整理的JS 原生实现复选框全选反选功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：只狼坠落之谷怎么走
下一篇： JS函数简单的底层原理 -变量重复声明无

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

JS 原生实现复选框全选反选功能

JS 原生實(shí)現(xiàn)復(fù)選框全選反選功能

總結(jié)