取消选中引导复选框按钮-纯JavaScript

我的应用程序中有一个数据过滤功能，用户可以使用复选框和下拉列表来选择如何过滤数据

我正在使用引导复选框：

<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>

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

<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>

但我不知道如何在屏幕上重置引导复选框以取消选中所有复选框

---

有什么想法吗？

试试这个，它会在所有选中的复选框中循环并取消选中。或者，您可以给每个复选框一个类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");
});

复选框1（预选中）
复选框2
复选框3
$（“.mychk”）。每个（函数（）{
$（此）.removeAttr（“选中”）；
});

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

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

---

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

---

$（“[type='checkbox']”）。prop（“checked”，false）

类似的功能应该可以使用。

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

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