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

【问题标题】：Check / uncheck the array of checkboxes选中/取消选中复选框数组
【发布时间】：2013-01-01 11:50:46
【问题描述】：

这就是我所拥有的（此处使用 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);
    });
  })

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

我该如何解决？

【问题讨论】：

仅供参考，使用.prop() 而不是.attr() 用于检查、只读和禁用等内容。您还泄漏了一个全局变量，因为您忘记了 isChecked 前面的 var
谢谢。但我为什么要使用 prop()？
因为它返回一个布尔值而不是字符串值。见api.jquery.com/prop
另外，您是要切换当前的选择还是实际选中或取消选中所有复选框？
@Stefan，你是完全正确的。我想选中/取消选中所有。我只是关注它。

标签： jquery jquery-1.7

【解决方案1】：

您错过了带有 my-categories 的 # 还需要将 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);
});

【讨论】：

checked = true 怎么样？
更新了我的答案@AlanDert 使用锚点检查和取消检查。

【解决方案2】：

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

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

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

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

【讨论】：

这是一个非常有趣的方法。
太棒了！如果您不希望它看起来像选项之一，您甚至可以隐藏额外的复选框，因为它只是用来保存选择。 #my-categories-btn { display: none; }

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：