Question

切换复选框功能仅工作一次，在第一个实例之后它不起作用。有什么帮助吗？

<script>

$(document).ready(function() {
    $(document).on('click','#1',function(){

          $("INPUT[type='checkbox']").each(function(){
    var Checked = $(this).attr('checked');
    $(this).attr('checked', !Checked);
  }); 


    });

});
</script>

<body>
<form id="form1" name="form1" method="post" action="">
  <p>
    <input name="checkbox" type="checkbox"  id="1" value="0" />
    <label for="1" >Toggle All</label>
  </p>
  <p>
    <input name="checkbox" type="checkbox" id="2" value="0" />
  ahmed</p>
  <p>
    <input name="3" type="checkbox" id="3" value="0" />
    <label for="3">omar</label>
  </p>
</form>
</body>

Answer 1

将Checked变量移出每个变量，因为this上下文在每个变量中都有变化，它指的是循环中的复选框，而不是切换复选框。更改checked属性时删除! not运算符。同时使用prop代替attr作为已检查的属性。

Demo

$(document).ready(function() {
   $(document).on('click','#1',function(){
        var Checked = $(this).prop('checked');  
        $("INPUT[type='checkbox']").each(function(){

            $(this).prop('checked', Checked);
        }); 
    });

});

Answer 2

你的jquery 在每个函数上，您不应该更改切换复选框的属性。

  $(document).ready(function() {
        $(document).on('click','#1',function(){ 
              $("INPUT[type='checkbox']").not(this).each(function(){             
                var Checked = $(this).prop('checked');          
                $(this).prop('checked', !Checked);
      });       
        });
    });

Demo

Answer 3

您也可以使用

$(document).ready(function() {
     $('#1').on('click',function(){
             var Checked = $(this).prop('checked');
             $.each($("input[type='checkbox']"), function(i,e){
             $(e).prop('checked', Checked);
             });
     });
});

复选框不切换

3 个答案: