使用jQuery检查/取消检查引导复选框

check/uncheck bootstrap checkboxes with jQuery

本文关键字：检查 复选框 jQuery 使用 取消      更新时间：2023-09-26

我昨天又发了一篇帖子，但是没有成功。我现在将尝试重新排序我的想法，并再次询问，因为我找不到解决方案(我是一个新手，我真的很努力)。

问题是，我正在使用这个基于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错误显示

在选择复选框时将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);
   }
});

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

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

但这不是我想要的。我还提到，我注意到，代码是"不同"时，检查它(在Chrome与F12)。因此，正如@thecbuilder所说，它的变化是为了添加样式。

我意识到既然代码在变化…我不得不改变类(复选框)，从我开始"span标签"搜索，所以我改变类复选框id状态，这是结果:

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

我想你正在寻找这样的代码:

$(document).ready(function()
{
    $("#allstates").on("change", function()
    {
        var checked = $(this).prop("checked");
        $(this).parents(".controls")
            .first()
            .find("input[type=checkbox]")
            .prop("checked", checked);
    });
});

JsFiddle例子

当id为allstates的复选框的状态发生变化时，获取复选框的值，找到类为controls的第一个父html元素，然后仅用checked值更新该元素中的所有复选框。

简单引导复选框

<label><input type="checkbox" value="">Option 1</label>

在Chrome开发工具中调试时，标签看起来像https://tinker.press/images/bootstrap -复选框标签- 2017 - 01 - 17 - _084755.png

选择复选框状态，将true|false设置为lable.control.checked 

label.control.checked = false; //uncheck
label.control.checked = true; //check

视频演示https://youtu.be/3qEMFd9bcd8

相关文章：