美文网首页
Jquery全选与反选点击执行一次的解决方案

Jquery全选与反选点击执行一次的解决方案

作者: 阿泽453 | 来源:发表于2017-12-14 16:40 被阅读0次

    总结:
    对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
    对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

    <script type="text/javascript">
    
      $("#chooseall").click(function(){
    
            // 使用attr只能执行一次
            var isChecked1 = $(this).attr("checked");
          $("input[name='list[]']").attr("checked" , isChecked1); 
        
    
          // 使用prop则完美实现全选和反选
            var isChecked2 = $(this).attr("checked");
          $("input[name='list[]']").prop("checked",  isChecked2);
    
            $("input[name='list[]']").prop("checked",this.checked);
       
            
            // 获取所有选中的项并把选中项的文本组成一个字符串
          var str = '';
          $("input[name='list[]']:checked").each(function(){
              str += $(this).next().text() + ',';
          });
    
          alert(str);
      });
    
    </script>
    
    <script type="text/javascript">
        $(function(){
    
            var $choose = $("#choose input");
    
            //全选
            $("#all").click(function(){
                 $choose.each(function(){
                     $(this).prop("checked",true);
                 });
            });
    
            //全不选
            $("#not").click(function(){
                 $choose.prop("checked",false);
            });
    
            //反选
            $("#reverse").click(function(){
                 $choose.each(function(){
                     $(this).prop("checked",!$(this).prop("checked"));
                 });
            });
    
            //简洁的反选操作
            $("#CheckRev").click(function(){
                $("[name=items]:checkbox").each(function(){
                    this.chekced = !this.checked;
                });
            });
    
            //  全选\全不选
            $("#CheckAll").click(function(){
                $("[name=item]:checkbox").prop("checked",this.checked);
            });
    
            //根据长度值,复选框联动
            $("[name=itmes]:checkbox").click(function(){
    
                //定义一个临时变量,避免重复使用同一个选择器选择页面中的元素,提高程序效率
                var $tmp = $("[name=items]:checkbox");
    
                //用filter()方法筛选出选中的复选框,并直接给CheckedAll赋值
    
                $("#CheckedAll").prop("checked",$temp.length == $temp.filter(':checked').length);
    
            });
        });
    
    </script>
    

    相关文章

      网友评论

          本文标题:Jquery全选与反选点击执行一次的解决方案

          本文链接:https://www.haomeiwen.com/subject/feykwxtx.html