Javascript 取消选中引导单选按钮_Javascript_Jquery_Twitter Bootstrap_Radio

Javascript 取消选中引导单选按钮

javascript jquery twitter-bootstrap

Javascript 取消选中引导单选按钮,javascript,jquery,twitter-bootstrap,radio,Javascript,Jquery,Twitter Bootstrap,Radio,我正在尝试取消选中按钮组中带有标签的单选按钮，如下所示： <div> <label class="btn btn-primary"> <input type="radio" name="radio1" class="radio1" /> Radio1 </label> </div> <div> <label cl

我正在尝试取消选中按钮组中带有标签的单选按钮，如下所示：

<div>
            <label class="btn btn-primary">
              <input type="radio" name="radio1" class="radio1" />
    Radio1
            </label>
</div>
<div>
            <label class="btn btn-primary">
              <input type="radio" name="radio2" class="radio2" />
    Radio2
            </label>
</div>
$('.btn').on('click', function(e) {
      // Check if another option was previously checked
      if ($(this).parent().parent().find(':radio:checked').length == 1) {
        inner_input = $(this).find('input');
        if (inner_input.prop('checked')) {
          e.stopImmediatePropagation();
          e.preventDefault();
          inner_input.prop('checked', false);
          $(this).removeClass('active');
        }
});


无线电1
无线电2
$（'.btn'）。在（'click'，函数（e）上{
//检查之前是否选中了其他选项
if（$（this.parent（）.parent（）.find（':radio:checked'）。长度==1）{
内部输入=$（this.find（'input'）；
if（内部_input.prop（'checked'））{
e、 停止即时复制（）；
e、 预防默认值（）；
内部输入.prop（'checked'，false）；
$（this.removeClass（'active'）；
}
});

不幸的是，它不起作用，即使在第二次单击后标签仍处于活动状态。

为什么会发生这种情况？首先让我们看看什么是

单击

，

鼠标点击

和

鼠标向下

事件：

鼠标向下移动

当用户按下鼠标按钮时激发

鼠标悬停

当用户释放鼠标按钮时激发

单击

在同一元素上发生mousedown和mouseup事件时激发。当用户激活具有键盘焦点的元素时激发（通常按Enter键或空格键）

因此，当使用

单击

事件时，单选按钮被选中，这意味着

radio.is（':checked'）

将始终返回

true

，除非禁用默认行为。因此，您可以通过两种方式执行所需操作：

1-使用

Mouseup

事件，在这种情况下，您可以确定单选按钮的状态是否已选中。但是，通过这种方式，您需要一点额外的代码来禁用

单击

事件的默认值

$('label').on('mouseup', function(e){
    var radio = $(this).find('input[type=radio]');

  if( radio.is(':checked') ){
    radio.prop('checked', false);

  } else {
    radio.prop('checked', true);

  }

});

// Disable default behavior
$('label').click(function(e){
    e.preventDefault();
});

和2，您可以将其全部打包，禁用

单击

的默认行为，并在一个事件中执行其余操作：

$('label').click(function(e) {
    e.preventDefault();

    var radio = $(this).find('input[type=radio]');

    if (radio.is(':checked')) {
        radio.prop('checked', false);

    } else {
        radio.prop('checked', true);

    }
});

我确实有目的地使用了两个不同的事件来回答这个问题，有时在更复杂的问题中，您可能会被迫使用

mouseup

事件，而不是

click