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

您错过了#我的类别也需要将this更改为$(this)来调用attr() jQuery函数，因为this会为您提供 DOM 对象和$(this)提供 jQuery 对象和属性可以使用jQuery对象调用。

<强> Live Demo

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

您不需要每个，您可以直接将值分配给已检查的属性

<强> Live Demo

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

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

<强> Live Demo

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

Answer 2

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

通过这种方式可以确定是否检查或取消选中所有复选框，而不仅仅是切换它们的当前状态。

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

使用额外的复选框查看 demo 。

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);
    });
  })

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

4 个答案: