全选或全不选

全选或全不选：

js版：

　　步骤分析：

　　　　1.确定事件：最上面那个复选框的单击事件 onclick

　　　　2.编写函数：让所有的复选框和最上面的复选框保持一致

　　　　　　　a.获取最上面这个复选框选中状态   通过checkbox的checked属性即可

　　　　　　　b.获取其他的复选框，设置他们的checked属性即可

　　　　　　　　　　可以通过

　　　　　　　　　　　　document.getElementsByClassName() 需要给下面所有的checkbox添加class属性

　　　　　　　　　　　　document.getElementsByName()  需要给下面所有的checkbox添加name属性

　　　　3.效果图：

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script>
        function selectAll(obj){
            //获取当前复选框状态
            if(obj.checked==true){
                //获取所有复选框
                var arr = document.getElementsByClassName("itemSelect");
                for(var i = 0;i<arr.length;i++){
                    //设置所有复选框状态
                    arr[i].checked = true;
                }
            }else{
                var arr = document.getElementsByClassName("itemSelect");
                for(var i = 0;i<arr.length;i++){
                    arr[i].checked = false;
                }
            }
        }
    </script>
    <body>
        <table id="tab1" border="1" width="800" align="center" >
            <tr>
                <th><input type="checkbox" onclick="selectAll(this)" ></th>
                <th>分类ID</th>
                <th>分类名称</th>
                <th>分类描述</th>
                <th>操作</th>
            </tr>
            <tr>
                <td><input type="checkbox" class="itemSelect"></td>
                <td>1</td>
                <td>手机数码</td>
                <td>手机数码类商品</td>
                <td><a href="">修改</a>|<a href="">删除</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="itemSelect"></td>
                <td>2</td>
                <td>电脑办公</td>
                <td>电脑办公类商品</td>
                <td><a href="">修改</a>|<a href="">删除</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="itemSelect"></td>
                <td>3</td>
                <td>鞋靴箱包</td>
                <td>鞋靴箱包类商品</td>
                <td><a href="">修改</a>|<a href="">删除</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="itemSelect"></td>
                <td>4</td>
                <td>家居饰品</td>
                <td>家居饰品类商品</td>
                <td><a href="">修改</a>|<a href="">删除</a></td>
            </tr>
        </table>
    </body>
</html>

jQuery:

　　步骤分析：

　　　　1.确定事件    复选框的单击事件

　　　　2.函数中

　　　　　　a.获取该复选框的选中状态    attr(获取不了checked属性) | prop

　　　　　　b.获取所有复选框修改他们的状态

　　　　注意：

　　　　　　若jquery版本>1.6    统一使用  prop操作元素的属性

 

posted @ 2020-07-07 21:58  Yisennnn丶  阅读(136)  评论(0)    收藏  举报