使用Jquery实现,全选，复选，反选

最新推荐文章于 2022-08-29 21:32:04 发布

青雾山河

最新推荐文章于 2022-08-29 21:32:04 发布

阅读量184

点赞数

分类专栏： HTML jquery

本文链接：https://blog.csdn.net/weixin_40969422/article/details/83067385

版权

HTML 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

jquery

2 篇文章 0 订阅

订阅专栏

需要注意的是：分别使用2个事件

父选择器用id选择器

子选择器用类选择器 <<<<>>>id选择器有唯一性

当然也可以定义onclick事件,父一个事件,所有子共同一个事件

代码没有写备注,有疑问可以在评论区提出，谢谢!

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <table border="1" cellpadding="0" cellspacing="0" width="220px" height="300px">
        <thead>
            <tr>
                <th><input type="checkbox" id="selectAll"></th>
                <th>全选/全不选</th>
            </tr>
        </thead>
        <tbody align="center">
            <tr>
                <td><input type="checkbox" class="selectOne"></td>
                <td>A</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="selectOne"></td>
                <td>B</td>
            </tr>
            <tr>

                <td><input type="checkbox" class="selectOne"></td>
                <td>C</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="selectOne"></td>
                <td>D</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="selectOne"></td>
                <td>E</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="selectOne"></td>
                <td>F</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="selectOne"></td>
                <td>G</td>
            </tr>
        </tbody>
    </table>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js" type="text/javascript"></script>
    <script type="text/javascript">
            $("#selectAll").change(function(){
                if($("#selectAll").prop("checked")){
                    $(".selectOne").prop("checked",true);
                }else{
                    $(".selectOne").prop("checked",false);
                }
            });
            $(".selectOne").change(function(){
                if(!(".selectOne").checked){
                    $("#selectAll").prop("checked",false);
                }
                var selectNum = $(".selectOne").length;
                var selectArr = $(".selectOne:checked").length;
                if(selectNum==selectArr){
                    $("#selectAll").prop("checked",true);
                }
            });
    </script>
</body>
</html>

青雾山河

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Jquery实现,全选，复选，反选

需要注意的是：分别使用2个事件父选择器用id选择器子选择器用类选择器 &lt;&lt;&lt;&lt;&gt;&gt;&gt;id选择器有唯一性当然也可以定义onclick事件,父一个事件,所有子共同一个事件代码没有写备注,有疑问可以在评论区提出，谢谢! &lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&a
复制链接

扫一扫

专栏目录