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

Question

这是我所拥有的(此处使用 Twitter bootstrap)

#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

我建议您使用复选框而不是用于选中/取消选中所有复选框的链接。

这样就可以确定是否选中或取消选中所有复选框，而不仅仅是切换其当前状态。

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

参见demo 使用额外的复选框。