js全选/全不选/反选

最新推荐文章于 2023-09-22 09:08:52 发布

原创最新推荐文章于 2023-09-22 09:08:52 发布 · 228 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #全选 #全不选 #反选

JavaScript 专栏收录该内容

18 篇文章

订阅专栏



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选练习</title><style type="text/css">
  
</style>
    <script type="text/javascript">

    </script>

</head>
<body>
    <input type="checkbox" id="boxId" onclick="selectAllNo();"/>全选/全不选<br/>
    <input type="checkbox" name="lo"/>足球
    <input type="checkbox" name="lo"/>篮球
    <input type="checkbox" name="lo"/>游泳
    <input type="checkbox" name="lo"/>唱歌<br/>
    <input type="button" value="全选" onclick="selectAll();"/>
    <input type="button" value="全不选" onclick="SelectNO();"/>
    <input type="button" value="反选" onclick="selectOther();"/>
    <script type="text/javascript">
       
        function selectAll() {
            // 获取要操作的复选框
            var box1=document.getElementsByName("lo");
            //checked判断是否选中
            for(var x=0;x<box1.length;x++)
            {
                var value1=box1[x];
                value1.checked=true;
            }
        }
        function SelectNO(){
            // 获取要操作的复选框
            var box2 = document.getElementsByName("lo");
             //checked判断是否选中
           for (var x = 0; x < box2.length; x++) {
               var value1=box2[x];
               value1.checked=false;
            }
        }
        function selectOther() {
            // 获取要操作的复选框
            var box1=document.getElementsByName("lo");
            //checked判断是否选中
            for(var x=0;x<box1.length;x++)
            {
                var value1=box1[x];
               if(value1.checked)
                   value1.checked=false;
               else
                   value1.checked=true;
            }
        }
 function selectAllNo() {
            // 获取要操作的复选框
            var box1=document.getElementById("boxId");
            //checked判断是否选中
            if(box1.checked==true)
            {
                selectAll();
            }
            else
            {
                SelectNO();
            }
        }
    </script>
</body>
</html>