实现效果:
点击全选,复选框全部被选中
取消全选,复选框全部被清空
如果复选框全部被选中,则全选框被选中,反之则不会。
HTML部分:
<input id="qx" type="checkbox" >全选<br />
<input type="checkbox" class="dxk"><br />
<input type="checkbox" class="dxk"><br />
<input type="checkbox" class="dxk"><br />
JS部分:
首先要引入JQ文件,这里我用的是发布版。
<script src="jquery-3.3.1.min.js"></script>
首先要用JQ的属性选择器,找到所有id名不为qx 的input元素。之后用一个变量接收。
var fxk=$("input[id!=qx]");
开始完成全选功能:
$("#qx").click(function() { //首先给id为全选的元素增加单击事件
if(this.checked){ //判断当前按钮是否被选中
for(var i=0;i<fxk.length;i++){ //判断之后要循环改变所有复选框的值
fxk[i].checked=true; //结果为真(选中),则复选框为true;
}
}else{
for(var i=0;i<fxk.length;i++){
fxk[i].checked=false; //结果为假(未选中),则复选框为false;
}
}
})
//全选与反选功能结束
之后完善细节
for(var i=0;i<fxk.length;i++){ //因为fxk是全局变量,所以这里也可以直接调用
$("input[id!=qx]").click(function() { //首先,循环给所有复选框增加单击事件
if(fxk[0].checked&&fxk[1].checked&&fxk[2].checked){ //判断每一个复选框是否被选中
qx.checked=true; //如果被选中,则全选框为true
}else{
qx.checked=false; //如果有一个没有被选中,则全选框为false
}
});
}
全选反选功能到这里也就结束了,只需要两小部分就能完成。
欢迎大家指出错误,或提出更简便的方式。
笔芯。