jQuery实现全选、不选、反选的两种方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

    <script>
        $(function(){
            $('.check .btn1').click(function(){//全选
                $('.music :checkbox').prop('checked',true);
            });

            $('.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>
<h2>复选框 全选 反选 全不选</h2>
爱好:
<div class="music">
<input type="checkbox" class="hby" name="hobby[]" value="1">蓝球
<input type="checkbox" class="hby" name="hobby[]" value="2">足球
<input type="checkbox" class="hby" name="hobby[]" value="3">臭球
<input type="checkbox" class="hby" name="hobby[]" value="4">混球
</div>
<br><br>
<div class="check">
    <button class="btn1">全选</button>
    <button class="btn2">全不选</button>
    <button class="btn3">反选</button>
</div>
</body>
</html>

评论

大侠名号:   验证码: 点击我更换图片  

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND