取消選中Bootstrap複選框按鈕 - Pure JavaScript

我的應用程序中有數據過濾功能，用戶可以使用複選框和下拉菜單選擇他們想要如何過濾數據。取消選中Bootstrap複選框按鈕 - Pure 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>

我有一個明確的過濾按鈕，從而清除從過濾器的所有用戶輸入，重置所有複選框，所有的下拉菜單，所有的文本字段。

我能夠重新下拉菜單是這樣的：

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

下面是我的複選框的圖像：

但我找不出我們如何重置引導在屏幕上的複選框取消選中所有複選框。

有什麼想法？

來源

2016-02-01 Skywalker

這會從它的父標籤

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

來源

2016-02-01 11:38:52

工作就像一個魅力！謝謝！ – Skywalker

試試這個，它會遍歷所有選定的複選框，並使它們不被檢查。或者你可以給每個複選框一個類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"); 
});

來源

2016-02-01 11:34:13 Mahesh

謝謝你的回答。我嘗試過，但我的複選框仍然保持突出顯示。如果你檢查我的問題，我已經發布了一張圖片。即使清除它們，您仍可以看到它們突出顯示爲藍色。 – Skywalker

這是你的按鈕類，你需要從標籤元素中刪除btn btn-primary類，看到我更新的答案 – Mahesh

歡呼隊友！幫助很多+1 – Skywalker

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

來源

2016-02-01 11:35:12 lacexd

刪除checked屬性，也主動類據我所知引導複選框使用屬性而不是屬性。

$("[type='checkbox']").prop("checked", false)類似的東西應該工作。

來源

2016-02-01 11:39:17 mickiewicz

取消選中Bootstrap複選框按鈕 - Pure JavaScript

回答

相關問題