全选按钮案例

最新推荐文章于 2023-11-09 11:24:12 发布

麋鹿会飞但不飘

最新推荐文章于 2023-11-09 11:24:12 发布

阅读量290

点赞数

文章标签： js 前端

本文链接：https://blog.csdn.net/weixin_57137447/article/details/125743185

版权

这段HTML代码展示了如何通过JavaScript实现全选和反选功能。当用户点击全选按钮时，所有选项都被选中；反之，如果所有选项已被选中，再次点击全选按钮则会取消所有选项的选择。代码中使用了querySelector和querySelectorAll方法来选取元素，并通过事件监听处理点击事件。

摘要由CSDN通过智能技术生成

确认需求：

点击全选按钮的时候全部选择
将所有选项按钮都点击了然后全选按钮被点击

运行截图：

代码如下：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0px;

padding: 0px;

background-color: antiquewhite;

}

.box{

width: 100px;

padding: 20px;

border: 1px solid pink;

margin: 30px auto;

border-radius: 5px;

}

hr{

margin: 10px 0;

}

</style>

</head>

<body>

全选：<input type="checkbox" ><br>

<hr>

</div>

</body>

var allBtn = document.querySelector("input")//只选input中的第一个

var items = document.querySelectorAll("input:nth-child(n+2)")//选择所有的input，n从0开始取值，n+2表示从第二个取值并且是一个伪数组

console.log(allBtn)

console.log(items)

allBtn.onclick = function () {

var type = allBtn.checked;

console.log(type)

for(var i = 0;i<items.length;i++){

items[i].checked = type;

}

for(var i =0;i<items.length;i++){

items[i].onclick = function () {

var flag = true;

for(var j=0;j<items.length;j++){

if(items[j].checked==false){

flag = false;

break;

}

allBtn.checked = flag;

}

</script>

</html>

<!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>
        *{
            margin: 0px;
            padding: 0px;
            background-color: antiquewhite;
        }
        .box{
            width: 100px;
            padding: 20px;
            border: 1px solid pink;
            margin: 30px auto;
            border-radius: 5px;
        }
        hr{
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="box">
        全选：<input type="checkbox" ><br>
        <hr>
        <!-- 分割线 -->
        <input type="checkbox">选项一<br>
        <input type="checkbox">项二<br>
        <input type="checkbox">选项三<br>
        <input type="checkbox">选项四<br>
    </div>
</body>
<script>
var allBtn = document.querySelector("input")//只选input中的第一个
var items = document.querySelectorAll("input:nth-child(n+2)")//选择所有的input，n从0开始取值，n+2表示从第二个取值 并且是一个伪数组
console.log(allBtn)
console.log(items)
allBtn.onclick = function () {
    var type = allBtn.checked;
    console.log(type)
    for(var i = 0;i<items.length;i++){
        items[i].checked = type;
    }
}
    for(var i =0;i<items.length;i++){
        items[i].onclick = function () {
            var flag = true;
            for(var j=0;j<items.length;j++){
                if(items[j].checked==false){
                    flag = false;
                    break;
                }
            }
            allBtn.checked = flag;
          }
    }
  

 

 

</script>
</html>