jquery實現複選框的全選「jquery選擇checkbox中的值」

切圖的時候經常會遇到一些表單的處理，比如全選、反選的效果，切圖網在做的時候通常會把這些效果做好，效果並不算複雜，完全可以手寫，但是遇到次數多了有必要形成一個有效的方法，方便以後快速套用。

全選複選效果需要注意的是，如果是全部複選框手動選擇以後，全選的複選框能不能自動勾選，也是衡量這個插件好用與否的關鍵。

而下面要介紹的這個allCheck.js 就是一個非常簡單實用的，未壓縮的情況下才1k大小。代碼如下（）；

//1、定義全選的插件
jQuery.fn.extend({
bindCheck:function($subCheckBox,$btnUncheck){
let $allCheckBox = this;
//1、給全選複選框綁定click事件
//this:是全選複選框（jQuery對象）
this.click(function(){
let isChecked = this.checked;
$subCheckBox.each(function(){
this.checked = isChecked;
});
});
//2、給反選
if(arguments.length==2){
$btnUncheck.click(function(){
$subCheckBox.each(function(){
this.checked = !this.checked;
});
reversCheck();
});
}
//3、給每個選擇項的複選框綁定事件
$subCheckBox.click(function(){
reversCheck();
});
function reversCheck(){
//1、判斷是否全部的複選框被選中
let isAllChecked = true;
$subCheckBox.each(function(){
if(!this.checked){
isAllChecked = false;
}
});
//2、處理全選複選框
$allCheckBox.prop("checked",isAllChecked);
}
}
});

調用方法

/*js全選反選*/
$(“#chkAll”).bindCheck($(“#projects_order :checkbox”),$(“#btnUnCheck”));

html代碼

<input type=”checkbox” id=”chkAll”>

<div id=”projects_order”><input type=”checkbox” name=”layTableCheckbox” lay-skin=”primary” lay-filter=”checkboxOne”></div>

附選擇部分之後，反選的情況代碼如下（選擇的改為不選中，不選中的改為選中）：

$('#projects_order tbody input[type="checkbox"]').each(function(){
if($(this).is(":checked")){
$(this).prop('checked',false);
}
else{
$(this).prop('checked',true);
}
});