大家好！，今天介绍一个简单实现全选全不选的方法，希望能对你有帮助哦！

程序员文章站 2023-12-24 19:43:09

2019-08-17 ......

2019-08-17

要求：
1.点击全选按钮时，所有的单击按钮全部被选中；取消时，单击按钮全部被取消。
2.全选按钮选中时，取消任何一个单击选项按钮时，全选按钮取消选中。
3.所有的单击按钮都选中时，全选按钮自动选中。
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="checkbox" name="all"/>全选<br />
        <input type="checkbox" name="one"/>
        <input type="checkbox" name="one"/>
        <input type="checkbox" name="one"/>
        <input type="checkbox" name="one"/>
        <input type="checkbox" name="one"/>
        <input type="checkbox" name="one"/>
        <input type="checkbox" name="one"/>
        <input type="checkbox" name="one"/>
    <script type="text/javascript">
        //获取所有相关的元素
        var all = document.getelementsbyname("all")[0];
        var one = document.getelementsbyname("one");
        
        //首先给全选按钮绑定一个点击事件
        all.onclick = function(){
            //然后遍历所有的单击按钮
            for (var i = 0; i < one.length; i++) {
                one[i].checked = this.checked;
                //当全选按钮被选中时，所有的单击按钮也都被选中；当全选按钮没点击时，所有单击按钮取消选中
            }    
        }
       </script>
       </body>
</html>

运行后的效果如下：