logo标签列表

使用jQuery选中/取消选中Bootstrap复选框

javascriptjqueryhtmltwitter-bootstrapcheckbox
12

昨天我发了另一个帖子，但没有成功。现在我会尝试重新组织我的想法，并再次提问，因为我找不到解决方法（我是新手，正在非常努力地尝试）。

问题是我正在使用基于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);
  }
});

测试2

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

还有其他我擦除的内容。

注意：检查时没有显示任何JavaScript错误。

1
$('#checkboxId').prop('checked'); 从 https://dev59.com/U3LYa4cB1Zd3GeqPcuKV#28604443 - Alex P.
4个回答
12

在选择复选框时，重要的是将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);
   }
});
手动处理复选框的点击选中状态帮助我解决了一个怪异问题，我的 iOS（12.1+）Web 应用程序中，浏览器会呈现我的复选框的反转状态。 - Gomino
7

自从我提到这个函数检查了我所有的复选框（即使那些不应该被选中的），我一直在寻找解决方案：

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

但这并不是我所想要的。我还提到，当使用Chrome和F12检查代码时，我注意到代码“不同”。所以正如@thecbuilder所说，它会改变以添加样式。
我意识到由于代码正在变化……我必须更改起始“span标签”搜索的类（复选框），因此我将类别从复选框更改为id state，并且这就是结果：
$('#allstates').click(function() {
  if($(this).attr("checked")){
    $('#states').find('span').addClass('checked');        
  }else{
    $('#states').find('span').removeClass('checked');
  }    
});

现在它终于可以运行了。
请检查以下链接：http://stackoverflow.com/questions/32266101/uncheck-table-row-in-bootstrap-table-on-specific-condition - Vilas
3

我认为你正在寻找以下代码：

$(document).ready(function()
{
    $("#allstates").on("change", function()
    {
        var checked = $(this).prop("checked");

        $(this).parents(".controls")
            .first()
            .find("input[type=checkbox]")
            .prop("checked", checked);
    });
});

当具有id为allstates的复选框状态改变时，获取该复选框的值，找到第一个类名为controls的父HTML元素，然后仅使用已选中的值更新该元素中的所有复选框。

JsFiddle示例

嗨，谢谢你的回答。我知道它在fiddle上可以运行，但是在我的代码中却无法运行。 - Limon
我已经使用您的确切HTML更新了这个小工具(http://jsfiddle.net/K6MD3/1/)，它似乎可以正常工作。有什么问题吗？ - Erik Philips
是的，我知道，我自己构建的代码在fiddle上可以工作，但在我的代码中却不能。我不知道可能是什么原因...我发布的js代码确实有效，但它选择了所有复选框，即使我不想要的那些也被选中了。 - Limon
谢谢关心。我知道这个方法是可行的，但在我的情况下不起作用。不过我已经想出了解决方案。 - Limon
请检查以下链接：http://stackoverflow.com/questions/32266101/uncheck-table-row-in-bootstrap-table-on-specific-condition - Vilas
2
遗憾的是，在使用复选框和单选按钮时，此方法不起作用：https://getbootstrap.com/docs/4.0/components/buttons/#checkbox-and-radio-buttons - Dave Elton
视频教程非常有用。 - Mahmud
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接