重置bootstrap单选按钮

Question

这必须是一个重复的问题，但我找不到答案。你如何重置引导单选按钮？

根据文档它被重置，但它没有看到做任何我尝试使用jquery来改变它但没有。

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

这是小提琴。 https://jsfiddle.net/m1jryanh/我点击了一个不同的按钮，然后点击重置按钮，希望它会重置但不会重置。

Answer 1

取消选择所有选项

如果您要更新用户界面，则可以从所有按钮（或您的案例标签）中明确删除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 2

您只需点击#option1。

即可

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

这是更新的fiddle。

Answer 3

您应该删除active课程并取消选中以下单选按钮。

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

<强> DEMO