Question

我试图取消选中按钮组中包含标签的单选按钮，如下所示：

<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');
        }
});

不幸的是，它不起作用，即使在第二次点击后标签仍然有效。

Answer 1

为什么会这样？

让我们先看看click，mouseup和mousedown事件是什么：

<强>鼠标按下

当用户按下鼠标按钮时触发。

<强>鼠标松开

当用户释放鼠标按钮时触发。

点击

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

因此，当使用click事件时，会选中单选按钮，这意味着radio.is(':checked')将始终返回true，除非您禁用默认行为。所以你可以通过两种方式做你想做的事：

1 - 使用Mouseup事件，在这种情况下，您可以确定是否选中了单选按钮的状态。但是这样您需要一些额外的代码来禁用click事件的默认behvaior

$('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(); });

<强> Fiddle

2 ，您可以将它们全部包装在一起，禁用click的默认行为，并在一个事件中执行其余操作：

$('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); } });

<强> Fiddle

我确实使用了2个不同的事件来回答这个问题，有时会出现更复杂的问题，您可能会被迫使用mouseup事件代替click

Answer 2

当前答案中的解决方案适用于无线电输入。但这不适用于按钮组。为了避免其他麻烦的搜索者，以下代码可能会有所帮助：

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

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

  if (radio.is(':checked')) {
    e.stopImmediatePropagation();
    $(this).removeClass("active");
    radio.prop('checked', false);
  } else {
    radio.prop('checked', true);

  }
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-outline-secondary active">
        <input type="radio" name="options" id="option1" autocomplete="off" checked>
        option 1
    </label>
  <label class="btn btn-outline-secondary">
        <input type="radio" name="options" id="option2" autocomplete="off">
        option 2
    </label>
  <label class="btn btn-outline-secondary">
        <input type="radio" name="options" id="option3" autocomplete="off">
        option 3
    </label>
</div>

取消选中bootstrap单选按钮

2 个答案:

为什么会这样？