CODEWITHSUNDEEP
phpjqueryhtmlcsstwitter-bootstrap
Gabriel Vargas
Gabriel Vargas

Reputation: 83

Bootstrap Radio Button uncheck by jQuery

I have a problem with my code using the bootstrap plugin. I have some radio buttuns in the following code:

    <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>

I want to put a button to reset the selection. I've tried a reset button (<button type="reset">), jQuery commands, but all fail.

In the Bootstrap API I found an explanation: http://getbootstrap.com/javascript/#buttons-checkbox-radio

that says:

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.

Please someone could help me find a solution to my problem?

Thanks, Gabriel.

Upvotes: 5

Views: 11272

Answers (4)

İsaTurkoglu
İsaTurkoglu

Reputation: 1

Add Button.prototype.toggle in bootstrap.js line 225 

if ($input.prop('type') == 'radio' && !changed) {
    this.$element.removeClass('active');
    $input.prop('checked', false).trigger('change');
}

Upvotes: -1

Oskari Mantere
Oskari Mantere

Reputation: 302

Have you tried creating a button with id "reset" and add use jQuery to remove the active class?

$("#reset").click( function() {
    $(".btn").each( function() {
        this.removeClass("active");
    });
});

Upvotes: 0

Norlihazmey Ghazali
Norlihazmey Ghazali

Reputation: 9060

First of all, you need to remove active class from label tag, then make the properties checked element on radio into false state, try this simple example below :

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

DEMO

Upvotes: 13

DannyPhantom
DannyPhantom

Reputation: 1063

$("button").on('click', function() {
    $("input:radio").prop('checked', false);
    $("input:radio").closest("label").removeClass("active");
})

This jQuery code should help you. When you click a button, it removes the checked property from all radios and toggles the class of the label as the API says

Upvotes: 3

Related Questions