<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-3.5.0.js"></script>
</head>
<body>
<div class="check">
<input type="checkbox" name="interest">唱<br>
<input type="checkbox" name="interest">跳<br>
<input type="checkbox" name="interest">rap<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>
</div>
</body>
<script>
//全选
$('#selectAllOrNot').click(function(){
var status=this.checked;
$('input[name="interest"]').prop('checked',status);
});
//反选
function reverseCheck() {
$('input[name="interest"]').each((index,dom)=>{
$(dom).prop('checked',!dom.checked);
$('#selectAllOrNot').prop('checked',$('input[name="interest"]:checked').length==$('input[name="interest"]').length)
})
}
//给每一个interest都绑定一个事件,用来改变 全选\全不选 的状态
$('input[name="interest"]').change(()=>{
$('#selectAllOrNot').prop('checked',$('input[name="interest"]:checked').length==$('input[name="interest"]').length)
})
</script>
</html>
效果图
451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
