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

Posted 2023-02-24

【中文标题】引导单选按钮由 jQuery 取消选中

【英文标题】：Bootstrap Radio Button uncheck by jQuery

【发布时间】：2015-11-22 14:14:13

【问题描述】：

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

    <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 类 给自己贴上标签。

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

谢谢， 加布里埃尔。

【参考方案1】：

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

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

DEMO

【讨论】：

非常感谢！救了我的工作......：D

没有额外的按钮怎么办？

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

我试过了。看看这个：jsfiddle.net/deligeli/gqf23tmw 但它不起作用:(

@Dejell 你的意思是，你想在页面加载时重置按钮？没有点击重置按钮？

【参考方案2】：

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

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

【参考方案3】：

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

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

【参考方案4】：

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

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

【讨论】：

我不建议直接更改库。当其他开发人员更新 lib 时会发生什么？