通过jquery实现全选，全不选和反选

最新推荐文章于 2024-01-23 19:19:19 发布

芦苇浅浅

最新推荐文章于 2024-01-23 19:19:19 发布

阅读量175

点赞数

分类专栏：前端文章标签： jquery 全选、全不选和反选复选框

本文链接：https://blog.csdn.net/weixin_42194777/article/details/80651831

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jquery路径可以修改，确保路径正确

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过jquery实现全选、全不选和反选</title>
    <script src="../js/jquery.js"></script>
</head>
<body>
<input type="checkbox" id="selectAll">全选
<input type="checkbox" id="notSelectAll">全不选
<input type="checkbox" id="reverseSelect">反选 <br/>

<input type="checkbox" name="ccc">1<br/>
<input type="checkbox" name="ccc">2<br/>
<input type="checkbox" name="ccc">3<br/>
<input type="checkbox" name="ccc">4<br/>
<input type="checkbox" name="ccc">5<br/>
<input type="checkbox" name="ccc">6<br/>

<script>
    $(function () {
        $("#selectAll").click(function () {
            $("input[name='ccc']").prop("checked",true);
            $("#notSelectAll").prop("checked",false);
            $("#reverseSelect").prop("checked",false);

        })

        $("input[name='ccc']").click(function () {
            var flag = $("input[name='ccc']:checked").length == $("input[name='ccc']").length
            $("#selectAll").prop("checked",flag);
        })

        $("#notSelectAll").click(function () {
            $("input[name='ccc']").prop("checked",false);
            $("#selectAll").prop("checked",false);
            $("#reverseSelect").prop("checked",false);
        })

        $("#reverseSelect").click(function () {
            $("input[name='ccc']").each(function(){
                $(this).prop("checked", !$(this).prop("checked"));
            });
            $("#selectAll").prop("checked",false);
            $("#notSelectAll").prop("checked",false);
        })

    })
</script>
</body>
</html>

芦苇浅浅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过jquery实现全选，全不选和反选

触发手风琴可以通过自定义的data-toggle 属性或者jQuery事件来触发，相较而言，data-toggle 一步写完更值得推荐。其中data-toggle值设置为 collapse，data-target="#折叠区id标识符"。...
复制链接

扫一扫

专栏目录