jQuery实现全选与反选的功能(js实现:https://blog.csdn.net/weixin_44657829/article/details/105740105)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.5.0.js"></script>
</head>
<body>
<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>
</body>
<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() {
/**
// 因为每个 '兴趣' 一个独立的存在,在改变我自己本身的时候,要去看一下别人的状态
$('input[name="interest"]').each(function() {
})
*/
$('#selectAllOrNot').prop('checked', $('input[name="interest"]').length == $('input[name="interest"]:checked').length);
})
/** 通过原生js的方式,绑定事件的时候必须遍历一个个绑定
var interest = document.getElementsByClassName('interest');
for(var i = 0; i < interest.length; i++){
interest[i].onchange = function() {
}
}
*/
</script>
</html>