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

Question

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

我使用的是bootstrap复选框：

<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复选框以取消选中所有复选框。

有什么想法吗？

Answer 1

试试这个，它将遍历所有选中的复选框并使其不被选中。或者您可以为每个复选框指定一个类attr，然后对其进行循环。

     $( "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");
});

Answer 2

这将从其父标签

中删除checked属性和活动类

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

Answer 3

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

Answer 4

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

$("[type='checkbox']").prop("checked", false)这样的事情应该有用。