全选全不选、反选功能:jquery
<input type="checkbox" name="interest"> 篮球 <br>
<input type="checkbox" name="interest"> 读书 <br>
<input type="checkbox" name="interest"> 电影 <br>
<input type="checkbox" name="interest"> 阅读 <br>
<hr>
<input type="checkbox" id="selectAllOrNot" name="selectAllOrNot"> 全选/全不选
<button onclick="reverseCheck()">反选</button>
实现功能代码如下:
<script>
$('#selectAllOrNot').change(function() {
// 获取 ”全选/全不选“ 本身的状态, true或者false
var status = this.checked;
// 通过prop将所有被选中的 input进行状态改变。
$('input[name="interest"]').prop('checked', status);
})
// 反选功能
function reverseCheck() {
var flag = true;
$('input[name="interest"]').each((index, dom) => {
// dom.checked 指的是当前遍历的checkbox的选中状态 true, false
var status = dom.checked; //获取当前遍历的dom的选中状态
$(dom).prop('checked', !status); // 将每个 “兴趣" 的状态取反
if(status) {
flag = false;
}
});
$('#selectAllOrNot').prop('checked', flag);
}
/*
* 通过jquery的方式,那么给一组 checkbox 绑定事件,可以一次性绑定,不用
* 像js那样,一个个遍历单独绑定
*/
$('input[name="interest"]').change(function() {
$('#selectAllOrNot').prop('checked', $('input[name="interest"]').length == $('input[name="interest"]:checked').length);
})
</script>