php - 通过 jQuery 取消选中 Bootstrap 单选按钮

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

说的是:

Visual checked state only updated on click If the checked state of a checkbox button is updated without firing a click event on the button (e.g. via or via setting the checked property of the input), you will need to toggle the .active class on the input's label yourself.

有人可以帮我找到解决问题的办法吗？

谢谢，加布里埃尔。

Answer 1

首先，您需要从 label 标签中移除 active 类，然后使 radio 元素上的 properties checked 元素变为 false 状态，试试下面这个简单的例子:

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

DEMO