日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > javascript >内容正文

javascript

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

發布時間：2023/12/31 javascript 28 豆豆
生活随笔 收集整理的這篇文章主要介紹了 JS 原生实现复选框全选反选功能 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

**

JS 原生實現復選框全選反選功能

**

按鈕功能實現思路：
全選按鈕： 直接將全選按鈕的狀態賦值給每一個 復選框。
復選框：只有當所有的復選框選中時，全選按鈕才能選中，所以每當復選框每點擊一次就要檢測所有的復選框有沒有選中，本方法是設置一個開關flag ， 來篩選出復選框都選中的情況。
反選按鈕功能：直接將此時按鈕的狀態取反即可。

<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'); // 小按鈕// 設置全選checkbox.onclick = function () {for (var i = 0; i < inp.length; i++) {inp[i].checked = this.checked; // 這個里的 是將全選按鈕的狀態賦值給所有的inp }};// 設置小按鈕// 要個每一個按鈕都要綁定點擊事件 所以需要循環 ， for (let i = 0; i < inp.length; i++) {inp[i].onclick = function () {let flag = true;// 每點擊一個小按鈕 就要檢測 所有的小按鈕是否都全選了 設置了一個 開關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>

實現復選框還有另外一種更加簡便的方法：

功能實現思路： 當復選框的選中個數 等于 復選框的個數 時 ，代表復選框已經全部選中，就要將全選按鈕選中。

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。