jquery - 选中/取消选中复选框数组

Question

这就是我所拥有的（此处使用 Twitter 引导程序）

#html
 <ul id="my-categories">
    <li>
      <label class="checkbox">
        <input checked="checked" name="supername[]" type="checkbox" value="43243">fdsfdsfds
      </label>
    </li>

    <li>
      <label class="checkbox">
        <input checked="checked" name="supername[]" type="checkbox" value="21343">sadsadsadsadsd
      </label>
    </li>
    <li class="fdsfds"></li>
    <li>
      <a href="#" id="my-categories-btn">Check/Uncheck all</a>
    </li>
  </ul>

 # js file
 $("#my-categories-btn").click(function(){
    $("my-categories input[type=checkbox]").each(function(){
        isChecked = $(this).attr('checked');
    $(this).attr('checked', !isChecked);
    });
  })    

它只是由于某种原因不起作用。

我如何解决它？

Answer 1

您错过了#with my-categories 也需要更改this为$(this)调用attr()jQuery 函数，因为this给您DOM对象并$(this)给jQuery对象和属性可以用 jQuery 对象调用。

现场演示

$("#my-categories-btn").click(function(){
    $("#my-categories input[type=checkbox]").each(function(){
        $(this).attr('checked', false);
    });
})    

您不需要每个在这里您可以直接将值分配给选中的属性

现场演示

$("#my-categories-btn").click(function() {
    $("#my-categories input[type=checkbox]").attr('checked', false);
});​

对于选中和取消选中，您可以使用复选框集合的选中状态。

现场演示

$("#my-categories-btn").click(function() {
    lst = $("#my-categories input[type=checkbox]");
    $(lst).attr('checked', !lst[0].checked);
});​

Answer 2

I suggest you use a checkbox instead of the link you are using for checking/unchecking all checkboxes.

This way it´s possible to determine wether or not to check or uncheck all the checkboxes rather than just toggling their current state.

$('#my-categories-btn').change(function() {
    $('#my-categories input[type="checkbox"]').prop('checked', this.checked);
});​

See demo using an extra checkbox.

Answer 3

您需要my-categories通过前缀指定为 id 选择器#

 $("#my-categories-btn").click(function(){
    $("#my-categories input[type=checkbox]").each(function(){
        isChecked = $(this).attr('checked');
    $(this).attr('checked', !isChecked);
    });
  });  

Answer 4

相应地更新您的脚本代码。

$("#my-categories-btn").click(function(){
    $("#my-categories input[type=checkbox]").each(function(){
        isChecked = $(this).attr('checked');
    $(this).attr('checked', !isChecked);
    });
  })