reset bootstrap單選按鈕

Question

這是一個重複的問題，但我找不到答案。你如何重置引導單選按鈕？

根據文檔它被重置，但它沒有看到做任何事情我也嘗試使用jQuery來改變它，但沒有。

$('#Reset').click(function(){ 
$('#option1').button('reset'); 
    $("#option1").prop('checked', true); 
}); 

這裏是小提琴。 https://jsfiddle.net/m1jryanh/我點擊不同的按鈕，然後按重置按鈕，希望它會重置，但它沒有。

Answer 1

您只需在#option1進行點擊。

$('#Reset').click(function(){ 
    $("#option1").click(); 
}); 

這是更新的fiddle。

Answer 2

取消選擇所有選項

如果你指的是更新用戶界面，你可以明確地從所有的按鈕（或在您的案件標籤）刪除active類本身：

$('#Reset').click(function(){ 
    // Explicitly uncheck all of your radio buttons 
    $('[data-toggle="buttons"] :radio').prop('checked', false); 
    // Select all label elements within your toggle and remove the active class 
    $('[data-toggle="buttons"] label').removeClass('active'); 
}); 

您可以see this in action here和演示如下：

設到第一個選項

同樣的，如果你想將其設置爲它的初始選項，你可以簡單地觸發第一元素的click事件：

$('#Reset').click(function(){ 
    // Explicitly uncheck all of your radio buttons 
    $('[data-toggle="buttons"] :radio').prop('checked', false); 
    // Select all label elements within your toggle and remove the active class 
    $('[data-toggle="buttons"] label').removeClass('active'); 

    // Set the first one as checked and selected 
    $('[data-toggle="buttons"] :radio:first').addClass('active'); 
    // Do the same thing for the active indicator 
    $('[data-toggle="buttons"] label:first').addClass('active'); 
}); 

可以see this option in action here和證明如下：

Answer 3

您應該刪除active類並取消選中下面的單選按鈕。

$('#Reset').click(function() { 
    $('.btn-group :radio').prop('checked', false); 
    $('.btn-group .active').removeClass('active'); 
}); 

DEMO