Jquery实现 全选反选
生活随笔
收集整理的這篇文章主要介紹了
Jquery实现 全选反选
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Jquery實現 全選反選
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../jquery-3.5.0.min.js"></script> </head><body><input type="checkbox" id="a1">全選 <input type="button" value="反選" id="a3"><br /><input type="checkbox" class="a2"> 張三 <br /><input type="checkbox" class="a2"> 李四<br /><input type="checkbox" class="a2"> 王五<script>//設置全選$('#a1').click(function (){let flag = $(this).prop('checked'); // 獲得點擊的按鈕的選中狀態 ，true /false.$('#a1,.a2').prop('checked', flag);// if(flag){// $('#a1,.a2').prop('checked',true);// }else{// $('#a1,.a2').prop('checked',false);// }});// 設置小按鈕的選中狀態$('.a2').click(function (){xiao(); // 調用});//設置反選$('#a3').click(function () { let xz = $('.a2'); // 獲取所有的復選框xz.each(function (elm){ // 利用jq中的 each 遍歷 所有的復選框$(this).prop('checked',!$(this).prop('checked')); // 直接將復選框的狀態取反// 取反后要判斷此時的 復選框是否全都選中了， 直接調用封裝的函數；xiao();})});// 封裝函數： 復選框的選中狀態function xiao(){let sy = $('.a2').length; // 獲得所有的復選框的個數let xz= $('.a2:checked').length; // 獲得所有 復選框的選中個數$('#a1').prop('checked', sy== xz); // 將復選框的所有個數個跟 復選框的選中個數 的判斷結果賦值給 全選按鈕。};</script> </body></html>總結
以上是生活随笔為你收集整理的Jquery实现 全选反选的全部內容，希望文章能夠幫你解決所遇到的問題。
