js复选框的全选和取消全选的实现

最新推荐文章于 2022-12-31 19:34:38 发布

蔚蓝天空857

最新推荐文章于 2022-12-31 19:34:38 发布

阅读量171

点赞数 1

文章标签： js checkbox dom

本文链接：https://blog.csdn.net/qq_45148387/article/details/117392451

版权

这个博客展示了如何用JavaScript实现一个全选和反选的功能，通过监听复选框的点击事件来同步所有子项的选择状态。博客中包含了初始版本、简化版和最终完善的代码示例，确保在用户取消任何子项选择时，全选复选框也会相应更新状态。

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

js实现：

<!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>
<body>
    <script type="text/javascript">
        window.onload = function(){
            var quan = document.getElementById("quan");
            quan.onclick = function(){
                var aihaos = document.getElementsByName("aihao");
                for(var i = 0; i<aihaos.length ; i++){
                    if(quan.checked){
                        aihaos[i].checked = true;
                    }else{
                        aihaos[i].checked = false;
                    }
                }
            }
        }
    </script>
    <input type="checkbox" id="quan"/>
    <br>
    <input type="checkbox" name="aihao" value="smoke"/>抽烟
    <br>
    <input type="checkbox" name="aihao" value="drink"/>喝酒
    <br>
    <input type="checkbox" name="aihao" value="firehair"/>烫头
    <br>
</body>
</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>
</head>
<body>
    <script type="text/javascript">
        window.onload = function(){
            var quan = document.getElementById("quan");
            quan.onclick = function(){
                var aihaos = document.getElementsByName("aihao");
                for(var i = 0; i<aihaos.length ; i++){
                    aihaos[i].checked = quan.checked;
                }
            }
        }
    </script>
    <input type="checkbox" id="quan"/>
    <br>
    <input type="checkbox" name="aihao" value="smoke"/>抽烟
    <br>
    <input type="checkbox" name="aihao" value="drink"/>喝酒
    <br>
    <input type="checkbox" name="aihao" value="firehair"/>烫头
    <br>
</body>
</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>
</head>
<body>
    <script type="text/javascript">
        window.onload = function(){
            var quan = document.getElementById("quan");
            var aihaos = document.getElementsByName("aihao");
            quan.onclick = function(){
                for(var i = 0; i<aihaos.length ; i++){
                    aihaos[i].checked = quan.checked;
                }
            }

            for(var i = 0; i<aihaos.length ; i++){
                aihaos[i].onclick = function(){
                     var count = aihaos.length;
                     var checkedCount = 0;
                     for(var i = 0; i<aihaos.length; i++){
                         if(aihaos[i].checked){
                             checkedCount++;
                         }
                     }
                     quan.checked = (count ==checkedCount);
                }
            }
        }
    </script>
    <input type="checkbox" id="quan"/>
    <br>
    <input type="checkbox" name="aihao" value="smoke"/>抽烟
    <br>
    <input type="checkbox" name="aihao" value="drink"/>喝酒
    <br>
    <input type="checkbox" name="aihao" value="firehair"/>烫头
    <br>
</body>
</html>