Bootstrap单选按钮取消选中jQuery

Question

我的代码使用bootstrap插件时遇到问题.我在下面的代码中有一些无线电按钮:

    <div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
   </div>

我想按一个按钮来重置选择.我尝试了一个重置​​按钮(<button type="reset">),jQuery命令,但都失败了.

在Bootstrap API中我找到了一个解释:http: //getbootstrap.com/javascript/#buttons-checkbox-radio

说的是:

视觉检查状态仅在单击时更新如果已更新复选框按钮的选中状态而未触发按钮上的单击事件(例如,通过或通过设置输入的已检查属性),则需要切换.active类.输入标签自己.

请有人帮我找到解决问题的方法吗？

谢谢,加布里埃尔.

Answer 1

首先,您需要从label标签中删除活动类,然后将radio上的属性checked元素设置为false状态,请尝试以下简单示例:

$('button').click(function () {
  $('.btn-group').find('label').removeClass('active')
  .end().find('[type="radio"]').prop('checked', false);
});

DEMO