javascript - Uncheck bootstrap radio button - Stack Overflow

admin管理员组

文章数量:1325374

I'm trying to uncheck a radio button wrapped with a label in a button group like this:

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

Unfortunately it doesn't work and the label is still active even after the second click.

I'm trying to uncheck a radio button wrapped with a label in a button group like this:

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

Unfortunately it doesn't work and the label is still active even after the second click.

• javascript
• jquery
• forms
• twitter-bootstrap
• radio-button

Share Improve this question Follow edited Jul 1, 2022 at 16:43 Jonas 129k102102 gold badges327327 silver badges405405 bronze badges asked Dec 26, 2017 at 22:30 LiorLior 6,0511111 gold badges3434 silver badges4747 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

The solution in current answer works well for radio inputs. But it didn't work for button groups. To save other searchers of trouble, following code might be helpful:

$('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./bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery./jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn./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" autoplete="off" checked>
        option 1
    </label>
  <label class="btn btn-outline-secondary">
        <input type="radio" name="options" id="option2" autoplete="off">
        option 2
    </label>
  <label class="btn btn-outline-secondary">
        <input type="radio" name="options" id="option3" autoplete="off">
        option 3
    </label>
</div>

Why this happens?

Let's first see what are click, mouseup and mousedown events :

mousedown

Fires when the user depresses the mouse button.

mouseup

Fires when the user releases the mouse button.

click

Fires when a mousedown and mouseup event occur on the same element. Fires when the user activates the element that has the keyboard focus (usually by pressing Enter or the space bar).

So When using click event, the radio button is checked, it means that radio.is(':checked') will always return true unless you disable default behavior. So you can do what you want in 2 ways :

1- With Mouseup event, in this case you can determine the state of radio button wether it's checked or not.But in this way you need one little extra code to disable the default behvaior of click event

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

And 2 , You can wrap it all together, disable click's default behavior and do the rest in one event:

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

I did answer this question using 2 different events with a purpose, sometimes in more plex problems you may be forced to use the mouseup event instead of click

本文标签： javascriptUncheck bootstrap radio buttonStack Overflow