js全选练习

最新推荐文章于 2022-07-16 17:44:04 发布

majia女孩

最新推荐文章于 2022-07-16 17:44:04 发布

阅读量142

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_42492077/article/details/104630877

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

js的全选demo

通过id和name 获取要操作的复选框
checked=true表示选中
checked=false表示不选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Button</title>
</head>
<body>
<div>
    <input type="checkbox" id="boxid" onclick="selAllNo();"/>全选/全不选</br>
    <div>
        <input type="checkbox" name="love" >baskeball</br>
        <input type="checkbox" name="love" >volleyball</br>
        <input type="checkbox" name="love" >baseball</br>
    </div>
    <input type="button" value="全选" onclick="selAll();"/>
    <input type="button" value="全不选" onclick="selNo();"/>
    <input type="button" value="反选" onclick="selOther();"/>
    <script type="text/javascript">
        //实现全选的方法
        function selAll(){
            /*1.获取操作的复选框，使用getElementByName()
              2.返回是数组，
                -属性 checked判断复选框是否选中
                   -checked = true；表示选中
                   -checked = false；表示不选中
                -遍历数组，得到每一个checked属性设为true；
             */
            var name1 = document.getElementsByName("love");
            //遍历数组
            for(var i = 0; i < name1.length; i++){
                var name2 = name1[i];
                //设置属性值为true
                name2.checked = true;
            }
        }

        //实现全不选方法
        function selNo() {
            //1.获取复选框
            //2.把checked设置为false
            var name1 = document.getElementsByName("love");
            for(var i = 0; i < name1.length; i++){
                var name2 = name1[i];
                name2.checked = false;
            }
        }

        //实现反选框
        function selOther() {
            //1.获取复选框
            //2.获取已经选择的复选框
            //3.判断当前复选框的状态
            //4.如果选中，则设为false，如果不选中，则设为true；
            var name1 = document.getElementsByName("love");
            for(var i = 0; i < name1.length; i++){
                var name2 = name1[i];

               if(name2.checked == true){//判断复选框的状态
                   name2.checked = false;
               }else{
                   name2.checked = true;
               }
            }
        }

        //实现全选和全不选
        function selAllNo(){
            /*1.得到上面那个复选框 通过ID
               2.判断复选框是否选中
                  -if checked = true, 下面是全选
                  - else，全不选
             */
            var box = document.getElementById("boxid");
            if(box.checked == true){//选中
               selAll();
            }else {
                selNo();
                }
        }
    </script>
</div>
</body>
</html>

majia女孩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js全选练习

js的全选demo通过id和name 获取要操作的复选框checked=true表示选中checked=false表示不选中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Button</title></...
复制链接

扫一扫