JS实现全选跟反选

最新推荐文章于 2024-08-04 16:33:59 发布

事业有程

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量226

点赞数

文章标签： javascript servlet html

本文链接：https://blog.csdn.net/weixin_71439860/article/details/126199939

版权

示例代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

ul {

list-style: none;

}

</style>

</head>

<body>

<input type="checkbox" name="sex2" id="check">全选/全不选

<input type="checkbox" name="sex2" id="checkid">反选

<hr>

<ul class="ul">

<li>

<input type="checkbox" name="sex" id="checkbox">苹果

</li>

<li>

<input type="checkbox" name="sex" id="checkbox">梨

</li>

<li>

<input type="checkbox" name="sex" id="checkbox">葡萄

</li>

<li>

<input type="checkbox" name="sex" id="checkbox">香蕉

</li>

<li>

<input type="checkbox" name="sex" id="checkbox">榴莲

</li>

</ul>

<script>

// 全选

var check = document.getElementById("check");

var inputall = document.querySelectorAll(".ul input")

check.onclick = function() {

for (let i = 0; i < inputall.length; i++) {

inputall[i].checked = check.checked

}

}

checkid.onclick = function() {

for (let i = 0; i < inputall.length; i++) {

inputall[i].checked = !inputall[i].checked

}

}

// 给每一个水果选项绑定一个单击事件

for (let i = 0; i < inputall.length; i++) {

inputall[i].onclick = function() {

var coust = 0; //用来统计被选中的input标签的个数

for (let j = 0; j < inputall.length; j++) {

if (inputall[j].checked == true) {

coust++

}

}

// 如果count的值等于水果的个数,全选要选中

if (coust == inputall.length) {

check.checked = true

} else {

check.checked = false

}

}

}

</script>

</body>

</html>