jQuery 复选框全选反选

Posted Programming is an art

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 复选框全选反选相关的知识，希望对你有一定的参考价值。

<script type="text/javascript">
 $(function(){
     //全选
     $("#CheckedAll").click(function(){
         $(‘[name=items]:checkbox‘).attr("checked", this.checked );
     });
     $(‘[name=items]:checkbox‘).click(function(){
         //定义一个临时变量，避免重复使用同一个选择器选择页面中的元素，提升程序效率。
         var $tmp=$(‘[name=items]:checkbox‘);
         //用filter方法筛选出选中的复选框。并直接给CheckedAll赋值。
         $(‘#CheckedAll‘).attr(‘checked‘, $tmp.length==$tmp.filter(‘:checked‘).length);
     });

     //输出值
     $("#send").click(function(){
        var str="你选中的是：\r\n";
        $(‘[name=items]:checkbox:checked‘).each(function(){
            str+=$(this).val()+"\r\n";
        })
        alert(str);
     });
  });
  </script>
</head>

<body>
<form method="post" action="">
    <b>你爱好的运动是?</b><br/>
    <input type="checkbox" id="CheckedAll" />全选/全不选<br/>
    <input type="checkbox" name="items" value="足球"/>足球
    <input type="checkbox" name="items" value="篮球"/>篮球
    <input type="checkbox" name="items" value="羽毛球"/>羽毛球
    <input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/>
    <input type="button" id="send" value="提　交"/> 
</form>

</body>

 

以上是关于jQuery 复选框全选反选的主要内容，如果未能解决你的问题，请参考以下文章

jQuery 复选框全选反选

Layui table中筛选列增加 [全选，反选] 功能【转】

JQuery实现列表中复选框全选反选功能封装

Vue实现单选、全选和反选

jQuery实现复选框全选全不选反选问题解析

JQuery实现列表中复选框全选反选功能封装