Jquery 复选框全选与反选点击执行一次然后失效解决方案

Posted 宇翔rose

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Jquery 复选框全选与反选点击执行一次然后失效解决方案相关的知识,希望对你有一定的参考价值。

在做项目时遇到一个bug,checkbox全选与反选功能,只能点击一次,再点就不起作用了,为了解决此问题,我查找了好多资料,下面把具体解决方案整理分享给大家,需要的朋友可以参考下
 

代码需求, 使用attr只能执行一次,使用prop则完美实现全选和反选,获取所有选中的项并把选中项的文本组成一个字符串。

解决方案一:

代码如下:

<html>
<head>
  <script src="jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
<body>
  <input type="checkbox" name="chk_list[]" value="1" />1
  <input type="checkbox" name="chk_list[]" value="2" />2
  <input type="checkbox" name="chk_list[]" value="3" />3
  <input type="checkbox" name="chk_list[]" value="4" />4
  <input type="checkbox" name="chk_all" id="chk_all" />全选/取消全选
<script type="text/javascript">
  $("#chk_all").click(function(){
   // 使用attr只能执行一次
   $("input[name=‘chk_list[]‘]").attr("checked", $(this).attr("checked")); 
   // 使用prop则完美实现全选和反选
   $("input[name=‘chk_list[]‘]").prop("checked", $(this).prop("checked"));
    // 获取所有选中的项并把选中项的文本组成一个字符串
   var str = ‘‘;
   $($("input[name=‘chk_list[]‘]:checked")).each(function(){
   str += $(this).next().text() + ‘,‘;
   });
   alert(str);
  });
</script>
</body>
</html>

总结:

对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。

对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

参考 http://www.jb51.net/article/62308.htm

 

 

<script type="text/javascript">
            jQuery(function($) {
//                给全选添加点击事件
                $("[name=‘allSel‘]").click(function(){
                    if($(this).is(‘:checked‘)){
                        $("[name=‘select‘]").prop(‘checked‘,true);
                    }else{
                        $("[name=‘select‘]").prop(‘checked‘,false);
                    }
                });
                //给复选框添加点击事件
                $("[name=‘select‘]").click(function(){
                    var allSel = false;
                    $("[name=‘select‘]").each(function(){
                        if(!$(this).is(‘:checked‘)){
                            allSel = true;
                        }
                    })
                    //如果有checkbox没有被选中
                    if(allSel){
                        $("[name=‘allSel‘]").prop(‘checked‘,false);
                    }else{
                        $("[name=‘allSel‘]").prop(‘checked‘,true);
                    }
                })

            });
        </script>





























以上是关于Jquery 复选框全选与反选点击执行一次然后失效解决方案的主要内容,如果未能解决你的问题,请参考以下文章

jQuery 实现复选框的全选与反选

jQuery全选与反选,且解决点击只执行一次的问题

jQuery全选与反选,且解决点击只执行一次的问题

el-table多级复选框全选与反选

html+css+js实现复选框全选与反选

vue中复选框全选与反选