引导单选按钮由 jQuery 取消选中

Question

我的代码使用引导插件时遇到问题。 我在以下代码中有一些单选按钮：

    <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

首先，您需要从标签标签中删除活动类，然后将属性选中的元素设置为错误状态，试试下面这个简单的例子：

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

DEMO

Answer 2

$("button").on('click', function() {
    $("input:radio").prop('checked', false);
    $("input:radio").closest("label").removeClass("active");
})

这个 jQuery 代码应该可以帮助你。当您单击一个按钮时，它会从所有单选中删除选中的属性，并按照 API 的说明切换标签的类

Answer 3

您是否尝试过创建一个 id 为“reset”的按钮并添加使用 jQuery 来删除 active 类？

$("#reset").click( function() {
    $(".btn").each( function() {
        this.removeClass("active");
    });
});

Answer 4

在 bootstrap.js 第 225 行添加 Button.prototype.toggle

if ($input.prop('type') == 'radio' && !changed) {
    this.$element.removeClass('active');
    $input.prop('checked', false).trigger('change');
}