Question

我遇到了这个问题，无法弄清楚为什么我的代码无效。

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

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

jQuery函数来自另一个post：

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

和html代码段是：

<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>

我错过了什么吗？

修改

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

这是一个片段：

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

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

Answer 1

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

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

Answer 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）。

选中jQuery无效的所有复选框

2 个答案: