选中所有与jQuery不兼容的复选框 [英] Select all checkboxes with jQuery not working

问题描述

我遇到了这个问题，无法弄清楚为什么我的代码无法正常工作.

I have this issue and can't figure out why my code isn't working.

我想在单击"Todas"时选中所有复选框.

I want to select all checkboxes when clicking on "Todas".

我用代码制作了小提琴，它在那里工作，但是在我的项目上运行时即使检查时未显示任何错误，它也不会.

I made a fiddle with the code and it works there, but when running on my project it doesn't, even though no errors are displayed while inspecting.

jQuery函数来自另一个 post :

The jQuery function is from another 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>

我错过了什么吗?

编辑

通过检查我使用的模板发现这些行将这些行添加到了复选框，这就是为什么这对我的代码不起作用，但对小提琴却起作用的原因.

Found out by inspecting that the template I use adds these lines to the checkboxes and that is why this doesn't work on my code, but it does on fiddle.

这是一个代码段:

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

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

So now I'm still struggling to check and uncheck the elements...

推荐答案

解决方案是找到另一个js文件添加的"span"标签(我使用的是基于引导程序的模板).因此，有效的代码是:

Solution was to find that "span" tag that another js file adds (I'm using a template based on bootstrap). So code that works is:

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

这篇关于选中所有与jQuery不兼容的复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！