jquery - 重置 Bootstrap 单选按钮

Question

这一定是一个重复的问题，但我找不到答案。如何重置 Bootstrap 单选按钮？

根据文档，它已重置，但它没有看到执行任何操作，我也尝试使用 jquery 来更改它，但什么也没做。

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

这是 fiddle 。 https://jsfiddle.net/m1jryanh/我点击另一个按钮，然后点击重置按钮，希望它会重置，但事实并非如此。

Answer 1

取消选择所有选项

如果您指的是更新 UI，您可以从所有按钮(或您的案例标签)本身中显式删除 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并演示如下: