全选，全不选，反选

最新推荐文章于 2022-12-13 22:34:38 发布

置顶我不是安徒生

最新推荐文章于 2022-12-13 22:34:38 发布

阅读量248

点赞数 1

分类专栏： jQuery 文章标签： jQuery 全选全不选反选 checkbox

本文链接：https://blog.csdn.net/yyl927117/article/details/58140550

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>全选，全不选，反选</title>
    <script src="libs/jquery-1.11.3.js"></script>
    <script>
        $(function(){
            $('.check .btn1').click(function(){//全选
                $('.music :checkbox').prop('checked',true);/*【注意】 此时用prop而不用attr；checked, selected 或者 disabled 使用prop()*/
            });

            $('.check .btn2').click(function(){//全不选
                $('.music :checkbox').prop('checked',false);
            });

            $('.check .btn3').click(function(){//反选
                $('.music :checkbox').each(function(){
                    $(this).prop('checked',!$(this).prop('checked'));
                });
            });
        });
    </script>
</head>
<body>
<div class="music">
    <input type="checkbox" name="music1" value="信仰">信仰-张信哲<br>
    <input type="checkbox" name="music2" value="还魂门">还魂门-胡彦斌<br>
    <input type="checkbox" name="music3" value="演员">演员-薛之谦<br>
    <input type="checkbox" name="music4" value="有个爱你的人不容易">有个爱你的人不容易-那英<br>
    <input type="checkbox" name="music5" value="平凡之路">平凡之路-朴树<br><br>
</div>
<div class="check">
    <button class="btn1">全选</button>
    <button class="btn2">全不选</button>
    <button class="btn3">反选</button>
</div>
</body>
</html>