全选:<input type="checkbox" class="allChecked" onclick="handallChecked()"><br> 路飞:
<input class="name" type="checkbox"><br> 狗蛋:
<input class="name" type="checkbox"><br> 迪迦:
<input class="name" type="checkbox"><br> 喜羊羊:
<input class="name" type="checkbox"><br> 胖虎:
<input class="name" type="checkbox"><br>
<br>
<button type="button" class="noall" onclick="handnoAllChecked()">反选</button>
<script>
var allChecked = document.querySelector(".allChecked")
var noall = document.querySelector(".noall")
var username = document.querySelectorAll(".name")
//选项点击触发是否全选的事件
for (var i = 0; i < username.length; i++) {
username[i].onchange = function() {
allChecked.checked = whereAll();
}
}
//点击全选矿实现全选
function handallChecked() {
for (var i = 0; i < username.length; i++) {
username[i].checked = allChecked.checked ? true : false
}
}
//反选操作
function handnoAllChecked() {
for (var i = 0; i < username.length; i++) {
username[i].checked = !username[i].checked
//再次验证是否被全选了
allChecked.checked = whereAll()
}
}
//判断是否全选.全选中,全选框会亮
function whereAll() {
var all = true;
for (var i = 0; i < username.length; i++) {
if (!username[i].checked) {
all = false
break;
}
}
return all;
}
</script>
js实现复选框的反选和全选
最新推荐文章于 2023-10-20 16:21:07 发布