取消选中 Bootstrap 复选框按钮 - 纯 JavaScript答案

【问题标题】：uncheck Bootstrap checkbox buttons - Pure JavaScript取消选中 Bootstrap 复选框按钮 - 纯 JavaScript
【发布时间】：2016-05-09 20:09:02
【问题描述】：

我的应用中有一个数据过滤功能，用户可以使用复选框和下拉菜单来选择他们想要过滤数据的方式。

我正在使用引导复选框：

<div class="btn-group" data-toggle="buttons">
 <label class="btn btn-primary active">
  <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
 </label>
 <label class="btn btn-primary">
  <input type="checkbox" autocomplete="off"> Checkbox 2
 </label>
 <label class="btn btn-primary">
  <input type="checkbox" autocomplete="off"> Checkbox 3
 </label>
</div>

我有一个清除过滤器按钮，用于清除过滤器中的所有用户输入、重置所有复选框、所有下拉菜单、所有文本字段。

我能够像这样重置下拉菜单：

// sectorPicker is drop down
document.getElementById('sectorPicker').reset();

下面是我的复选框的图像：

但我不知道如何重置屏幕上的 Bootstrap 复选框以取消选中所有复选框。

有什么想法吗？

【问题讨论】：

标签： javascript html twitter-bootstrap checkbox

【解决方案1】：

这将从其父标签中删除选中的属性以及活动类

$(":checkbox").prop('checked', false).parent().removeClass('active');

【讨论】：

【解决方案2】：

试试这个，它将遍历所有选中的复选框并取消选中它们。或者您可以给每个复选框一个类属性，然后对其进行循环。

     $( "input:checked" ).each(function(){
           $(this).removeAttr("checked");
           $(this).parent().removeClass("btn btn-primary");
            $(this).parent().removeClass('active');
           $(this).parent().addClass("btn btn-default");
     });

//方式二：

<div class="btn-group" data-toggle="buttons">
 <label class="btn btn-primary active">
  <input type="checkbox" class="mychk" autocomplete="off" checked> Checkbox 1 (pre-checked)
 </label>
 <label class="btn btn-primary">
  <input type="checkbox" class="mychk" autocomplete="off"> Checkbox 2
 </label>
 <label class="btn btn-primary">
  <input type="checkbox" class="mychk" autocomplete="off"> Checkbox 3
 </label>
</div>

$(".mychk").each(function(){
 $(this).removeAttr("checked");
});

【讨论】：

感谢您的回答。我试过了，但我的复选框仍然突出显示。如果你检查我的问题，我已经发布了一张图片。即使在清除它们之后，您也可以看到它们被突出显示为蓝色。
那是你的按钮类，你需要从标签元素中删除 btn btn-primary 类，看我更新的答案

【解决方案3】：

$('#You_id_checkbox').removeAttr("checked");

【讨论】：

【解决方案4】：

据我所知，引导复选框使用属性而不是属性。

$("[type='checkbox']").prop("checked", false) 这样的东西应该可以工作。

【讨论】：