<script src="./jquery-3.6.0.min.js"></script>
<div id="content">
<p> <label for="qx" class="qx"><input class="s1" type="checkbox" id="qx">全选</label></p>
<p> <label for="wxm"><input class="s2" type="checkbox" id="wxm">王小明</label></p>
<p> <label for="lq"><input class="s2" type="checkbox" id="lq">李强</label></p>
<p> <label for="zy"><input class="s2" type="checkbox" id="zy">张雨</label></p>
<p> <label for="lzq"><input class="s2" type="checkbox" id="lzq">*强</label></p>
<p> <label for="fx"><input class="s3"type="checkbox" id="fx">反选</label></p>
</div>
html标签
<script>
$(function() {
//全选和全不选;
$('.s1').click(function() {
$('.s3').prop('checked', false); //清掉s3;
console.log(this.checked)
if (this.checked) {
$('.s2').prop('checked', true);
//获取当前点击事件的父标签,修改父标签里面的文本节点,替换;
this.parentNode.replaceChild(document.createTextNode('全不选'), this.parentNode.lastChild);
} else {
$('.s2').prop('checked', false);
this.parentNode.replaceChild(document.createTextNode('全选'), this.parentNode.lastChild);
}
console.log(this.checked);
})
})
//反选;
$('.s3').click(function() {
$('.s1').prop('checked', false); //清掉s1
var s4 = document.querySelectorAll('.s2');
console.log(s4[1].checked);
for (var i = 0; i < s4.length; i++) {
if (s4[i].checked) {
$(s4[i]).prop('checked', false);
} else {
$(s4[i]).prop('checked', true);
}
}
})
</script>
js实现