js实现‘’全选‘’，‘反选’等功能

帅气且烦恼

已于 2024-03-21 14:24:52 修改

阅读量138

点赞数

分类专栏：笔记文章标签： js

于 2021-02-25 16:20:46 首次发布

本文链接：https://blog.csdn.net/qq_46641049/article/details/114089511

版权

笔记专栏收录该内容

12 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<!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>
</head>
<script>
    window.onload = (()=>{

        //获取四个单选框names
        var items = document.getElementsByName('items')

        //全选/全不选
        var checkedAllBox = document.getElementById('checkedAllBox');

        //全选按钮
            // -点击按钮以后，四个多选按钮全被选中
        var checkedAllBtn = document.getElementById('checkedAllBtn')
          checkedAllBtn.onclick=(()=>{

            for(var i = 0;i<items.length;i++){
                //设置四个单选框的状态
                items[i].checked = true
            }
            checkedAllBox.checked = true
        })
        //全不选
            // -点击按钮，四个单选框全不被选中
        var checkedNoBtn= document.getElementById('checkedNoBtn')
        checkedNoBtn.onclick=(()=>{
            for(var i = 0;i<items.length;i++){
                //设置四个单选框的状态
                items[i].checked = false
            }
            checkedAllBox.checked = false
        })
        //反 选
            // 点击按钮选中的变成没选中的
        var checkedRevBtn= document.getElementById('checkedRevBtn')
        checkedRevBtn.onclick=(()=>{
            
            //将checkedAllBox设置为选中状态
            checkedAllBox.checked = true

            for(var i = 0;i<items.length;i++){
                //设置四个单选框的状态
                // items[i].checked = false
                //判断多选框的状态

                // if(items[i].checked){
                //     items[i].checked = false
                // }else{
                //     items[i].checked = true
                // }

                items[i].checked =!items[i].checked
                if(!items[i].checked){
                        //一旦进入判断，则证明不是全选状态
                        // 将checkedAllBox设置为没选状态
                        checkedAllBox.checked = false;
                    }
            }
            //反选也需要判断全选状态

            //提交按钮
            //  点击提交按钮将所有选中的value值弹出
            var sendBtn = document.getElementById('sendBtn');
            sendBtn.onclick=(()=>{
                for(var i = 0;i<items.length;i++){
                //设置四个单选框的状态
                if(items[i].checked){
                  console.log(items[i].value)
                }
            }
            })
        })   

           checkedAllBox.onclick=(()=>{
               console.log(this ==checkedAllBox )
               //设置多相框的状态
               for(var i = 0;i<items.length;i++){
                //设置四个单选框的状态
                    items[i].checked = checkedAllBox.checked
            }
           })

           //如果四个多相框都选中，则checkedAllBox也应该选中
           //如果四个多选框选中，则checkedAllBox也不应该选中

        // 为四个多选框粉白绑定响应函数
        for(var i=0;i<items.length;i++){
            items[i].onclick=(()=>{
                //将checkedAllBox设置为选中状态
                checkedAllBox.checked = true
                for(var j=0;j<items.length;j++){
                    console.log(items[j])
                    if(!items[j].checked){
                        //一旦进入判断，则证明不是全选状态
                        // 将checkedAllBox设置为没选状态
                        checkedAllBox.checked = false;

                        //一单进入判断,就得出结果，就不用执行循环了
                        break;
                    }
                }
            })
        }
    })
</script>
<body>
    <form action="" method="post">

        你的爱好是?<input type="checkbox" name="" id="checkedAllBox">全选/不全选
        <br>

        <input type="checkbox" name="items" id="" value='足球' />足球
        <input type="checkbox" name="items" id="" value='蓝球'>蓝球
        <input type="checkbox" name="items" id="" value='羽毛球'>羽毛球
        <input type="checkbox" name="items" id="" value='乒乓球'>乒乓球
        <input type="checkbox" name="items" id="" value='排球'>排球

        <br>

        <input type="button" id="checkedAllBtn" value='全 选' />
        <input type="button" id="checkedNoBtn" value='全不 选' />
        <input type="button" id="checkedRevBtn" value='反 选' />
        <input type="button" id="sendBtn" value='提交' />
    </form>
</body>
</html>