在做网页项目的时候经常会遇到一些表单的填写,表单填写的时候自然会用到复选框。下面是一个简单的使用jQuery完成CheckBox的全选和反选功能的案例,希望能够帮到初学者。
使用方法
首先在HTML中先引入jquery.min.js
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
HTML结构
<input type="checkbox" id="all"/>全选
<button id="invert">反选</button>
<br/><br/>
<input type="checkbox" name="webObj"/>jquery<br/>
<input type="checkbox" name="webObj"/>html<br/>
<input type="checkbox" name="webObj"/>css<br/>
<input type="checkbox" name="webObj"/>web<br/>
JavaScript代码
// 全选
$("#all").on('click', function () {
$("input[name='webObj']").prop("checked", this.checked);
});
// 反选
$("#invert").on('click', function () {
var $subs = $("input[name='webObj']");
$subs.each(function () {
$(this).prop('checked', !$(this).prop('checked'));
})
$("#all").prop("checked", $subs.length == $subs.filter(":checked").length ? true : false);
});
// 选中所有的选项之后,全选自动勾选
$("input[name='webObj']").on('click', function () {
var $subs = $("input[name='webObj']");
$("#all").prop("checked", $subs.length == $subs.filter(":checked").length ? true : false);
});
功能详解:
全选:点击选中所有的复选框
反选:点击反选之后,已选中的变为不选中状态,不选中的变为选中状态。并且选项存在不选中状态时,全选的复选框不选中。
选项点击:每次点击选项时判断选中的数目和所有选项的数目是否相等,相等则自动勾选全选,不相同则取消勾选