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

Answer 2

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

这个jQuery代码可以帮到你。当您单击一个按钮时，它会从所有无线电中删除已检查的属性，并按照API所示切换标签的类

Answer 3

您是否尝试过创建一个ID为＆＃34; reset＆＃34;的按钮？并添加使用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');
}

Bootstrap单选按钮取消选中jQuery

4 个答案: