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 其中写道：

只有在点击时才更新可视选中状态。如果复选框按钮的选中状态在不触发按钮的单击事件的情况下进行更新（例如通过<input>或通过设置输入的checked属性），则需要自己在输入的标签上切换 .active 类

请问是否有人能帮我找到解决方案？

谢谢，Gabriel。

- Gabriel Vargas

Answer 1

首先，您需要从标签标记中删除活动类，然后将单选按钮中已选属性的元素设置为false状态。请尝试以下简单示例：

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

演示

- Norlihazmey Ghazali

---

非常感谢！救了我的工作... :D - Gabriel Vargas

我怎么能在没有额外按钮的情况下完成它？ - Dejell

@Dejell 你是什么意思？按钮点击只是一个例子，在这里你可以通过将那些代码放在点击事件之外来实现它。 - Norlihazmey Ghazali

我试过了。看这个链接：http://jsfiddle.net/deligeli/gqf23tmw/ 但是它不起作用 :( - Dejell

@Dejell 你的意思是在页面加载时重置按钮吗？而不用点击重置按钮？ - Norlihazmey Ghazali

不，我想在点击时重置它。点击所选按钮。 - Dejell

Answer 2

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

这段 jQuery 代码可以帮助你。当你点击一个按钮时，它会移除所有单选框的 checked 属性，并根据 API 中定义的方式切换标签的类。

- DannyPhantom

Answer 3

你尝试过创建一个ID为“reset”的按钮，然后使用jQuery移除active类吗？

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

- Oskari Mantere

Answer 4

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

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

- İsaTurkoglu

---

我不建议直接更改库。如果另一个开发人员更新了该库，会发生什么？ - Dan Cundy