取消選中引導單選按鈕

Question

我正在嘗試取消選中在這樣的按鈕組中用 label 包裹的單選按鈕：

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

不幸的是，它不起作用，即使在第二次點擊后 label 仍然處於活動狀態。

Answer 1

當前答案中的解決方案適用於無線電輸入。 但它不適用於按鈕組。 為了避免其他搜索者的麻煩，以下代碼可能會有所幫助：

 $('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>

Answer 2

為什么會發生這種情況？

我們先來看看什么是click 、 mouseup和mousedown事件：

鼠標按下

當用戶按下鼠標按鈕時觸發。

mouseup

當用戶釋放鼠標按鈕時觸發。

點擊

當同一元素上發生 mousedown 和 mouseup 事件時觸發。 當用戶激活具有鍵盤焦點的元素時觸發（通常通過按 Enter 或空格鍵）。

因此，當使用click事件時，單選按鈕被選中，這意味着radio.is(':checked')將始終返回true ，除非您禁用默認行為。 所以你可以通過兩種方式做你想做的事：

1-使用Mouseup事件，在這種情況下，您可以確定單選按鈕的 state 是否已選中。但是這樣您需要一些額外的代碼來禁用click事件的默認行為

$('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 ，您可以將它們包裝在一起，禁用click的默認行為並在一個事件中執行 rest：

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

    }
});

小提琴

我確實使用 2 個不同的事件來回答這個問題，有時在更復雜的問題中，您可能被迫使用mouseup事件而不是click