选择所有带有 jQuery 的复选框不起作用答案

【问题标题】：Select all checkboxes with jQuery not working选择所有带有 jQuery 的复选框不起作用
【发布时间】：2014-08-04 16:17:43
【问题描述】：

我遇到了这个问题，不知道为什么我的代码不起作用。

我想在点击“Todas”时选中所有复选框。

我用代码创建了一个fiddle，它在那里工作，但是在我的项目上运行时它没有，即使检查时没有显示错误。

jQuery函数来自另一个post：

$('#allstates').click(function() {
    var c = this.checked;
    $(':checkbox').prop('checked',c);
});

而html代码sn-p是：

<div class="hide" id="states">
  <div class="control-group">                           
    <label class="control-label">Seleccione</label>
      <div class="controls">
        <label class="checkbox span4">
          <input type="checkbox" class="all" value="all" id="allstates" name="all"/>Todas
        </label>
        <label class="checkbox span4">
          <input type="checkbox" value="Caba" id="" name="st[]"/>Ciudad Autónoma de Buenos Aires
        </label>
        <label class="checkbox span4">
          <input type="checkbox" value="Buenos Aires" id="" name="st[]"/> Buenos Aires
        </label>
        <label class="checkbox span4">
          <input type="checkbox" value="Catamarca" id="" name="st[]"/> Catamarca
        </label>
        <label class="checkbox span4">
          <input type="checkbox" value="Chaco" id="" name="st[]"/> Chaco
        </label>
       </div>
  </div>
</div>

我错过了什么吗？

编辑

通过检查我使用的模板将这些行添加到复选框中发现，这就是为什么这在我的代码上不起作用，但在小提琴上起作用。

这是一个sn-p：

<label class="checkbox span4">
    <div class="checker">
     <span><input type="checkbox" value="Buenos Aires" id="" name="st[]">
     </span>
    </div> Buenos Aires
</label>

所以现在我仍在努力检查和取消选中元素...

【问题讨论】：

您的 jQuery 是在文档就绪调用中还是在文档底部？ jsFiddle 默认将代码包装在window.load() 中。
我有此复选框的文件正在从另一个（主要）调用，所以是的... jquery 正在加载
我不明白你的评论。你能发布一个链接到你的页面吗？
@Luka - 不，不会产生错误，它会默默地失败。您在jsfiddle.net/j08691/L4C2f 看到任何错误吗？
@j08691：每当您尝试在尚未加载的元素上注册事件或在其上调用方法时都会出现错误。

标签： javascript jquery html

【解决方案1】：

解决方案是找到另一个 js 文件添加的“span”标签（我使用的是基于引导程序的模板）。所以有效的代码是：

$('#allstates').click(function() {
  if($(this).attr("checked")){
    $('#states').find('span').addClass('checked');  
    $('#states').find('input').prop('checked',true);        
  }else{
    $('#states').find('span').removeClass('checked');
  }    
});

【讨论】：

【解决方案2】：

尝试以下方法：

<html>
<head>
    <script type="text/javascript" src="JQ.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#allstates').click(function() {
            var c = this.checked;
            $(":checkbox").prop("checked", c);
            });
        });
    </script>
</head>
<body>
    <div class="hide" id="states">
      <div class="control-group">                           
        <label class="control-label">Seleccione</label>
          <div class="controls">
            <label class="checkbox span4">
              <input type="checkbox" class="all" value="all" id="allstates" name="all"/>Todas
            </label>
            <label class="checkbox span4">
              <input type="checkbox" value="Caba" id="" name="st[]"/>Ciudad Autónoma de Buenos Aires
            </label>
            <label class="checkbox span4">
              <input type="checkbox" value="Buenos Aires" id="" name="st[]"/> Buenos Aires
            </label>
            <label class="checkbox span4">
              <input type="checkbox" value="Catamarca" id="" name="st[]"/> Catamarca
            </label>
            <label class="checkbox span4">
              <input type="checkbox" value="Chaco" id="" name="st[]"/> Chaco
            </label>
           </div>
      </div>
    </div>
</body>
</html>

JQ 是一个 jQuery 库（版本 1.11.1）。

【讨论】：

卢卡感谢您的回答。检查我的编辑，你就会明白我的问题是什么......我刚刚发现