2021年7月11日

jquery复选框全选反选简易插件,超好用


切图的时候经常会遇到一些表单的处理,比如全选、反选的效果,切图网在做的时候通常会把这些效果做好,效果并不算复杂,完全可以手写,但是遇到次数多了有必要形成一个有效的方法,方便以后快速套用。

全选复选效果需要注意的是,如果是全部复选框手动选择以后,全选的复选框能不能自动勾选,也是衡量这个插件好用与否的关键。

而下面要介绍的这个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);
}
});

标签:, ,

微信扫一扫二维码访问