使用jQuery检查/取消选中bootstrap复选框

Question

我昨天又发了一篇文章,并没有成功.我现在会尝试重新排序de idea并再次询问,因为我找不到解决方案(我是一个新手,我正在努力尝试).

问题是我正在使用基于Bootstrap的这个模板,这是我可以直接从其中一个文件中看到的代码,我在我的项目中使用的代码:

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" value="all" id="allstates" name="all"/>Todas
        </label>

        <label class="checkbox span4">
          <input class="states" type="checkbox" value="Caba" id="" name="st[]"/>Ciudad Autónoma de Buenos Aires
        </label>

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

        <label class="checkbox span4">
          <input class="states" type="checkbox" value="Catamarca" id="" name="st[]"/> Catamarca
        </label>
      </div>
    </div>
  </div>

经过大量的搜索,我在检查时发现我的代码看起来像这样(片段):

<div class="controls">
  <label class="checkbox span4">
    <div class="checker" id="uniform-allstates">
      <span>
        <input type="checkbox" value="all" id="allstates" name="all">
      </span>
    </div>Todas
  </label>

  <label class="checkbox span4">
    <div class="checker">
      <span>
        <input class="states" type="checkbox" value="Caba" id="" name="st[]">                          
       </span>
    </div> Ciudad Autónoma de Buenos Aires
  </label>

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

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

正如你所看到的,添加了另一个div和另一个span(严重不知道为什么或如何)所以我猜现在它是一个DOM问题,我正在拥有它.

这是我的js文件的片段:

$('#allstates').click(function() {
  $('.checkbox').find('span').addClass('checked');
});

因此,此函数选择我拥有的所有复选框(即使是我不想要的复选框,因为它们属于另一个类别).

我想知道为什么添加div和span以及如何只选择我想要的复选框.

为此,我一直在尝试这样的代码,但没有成功:

测试1

$('#allstates').click(function() {
  if ($(this).is(':checked')) {
    $('span input').attr('checked', true);
  } else {
    $('span input').attr('checked', false);
  }
});

TEST2

$('#allstates').click(function() {
  $(".states").prop("checked",$("#allstates").prop("checked"))
});

以及我删除的其他内容.

注意:检查时没有显示js错误

Answer 1

同样重要的是在选择复选框时将prop添加到true:

$("#checkAll").click(function(){
   var check = $(this).prop('checked');
   if(check == true) {
     $('.checker').find('span').addClass('checked');
     $('.checkbox').prop('checked', true);
   } else {
     $('.checker').find('span').removeClass('checked');
     $('.checkbox').prop('checked', false);
   }
});

Answer 2

因为我提到这个函数检查了我所有的复选框(即使那些不应该被检查的复选框),我一直在寻找解决方案:

$('#allstates').click(function() {
  $('.checkbox').find('span').addClass('checked');
});

但这不是我想要的.我还提到我注意到代码在检查时是"不同的"(在Chrome中使用F12).正如@thecbuilder所说,它改变了以增加风格.

我意识到,因为代码正在改变......我不得不改变我开始"span tag"搜索的类(复选框),所以我将类复选框更改为id状态,这是结果:

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

现在它终于奏效了.