I have a data filtration function in my app, where users can use checkboxes and dropdowns to select how they want to filter the data.

I am using the bootstrap checkboxes:

<div class="btn-group" data-toggle="buttons">
 <label class="btn btn-primary active">
  <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
 </label>
 <label class="btn btn-primary">
  <input type="checkbox" autocomplete="off"> Checkbox 2
 </label>
 <label class="btn btn-primary">
  <input type="checkbox" autocomplete="off"> Checkbox 3
 </label>
</div>

I have a clear filter buttons which clears all the users inputs from the filters, resets all checkboxes, all drop downs, all text fields.

I was able to reset drop downs like this:

// sectorPicker is drop down
document.getElementById('sectorPicker').reset();

Below is the image of my checkboxes:

But I can't figure our how to reset the Bootstrap checkboxes on the screen to uncheck all checkboxes.

Any thoughts?

I have a data filtration function in my app, where users can use checkboxes and dropdowns to select how they want to filter the data.

I am using the bootstrap checkboxes:

<div class="btn-group" data-toggle="buttons">
 <label class="btn btn-primary active">
  <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
 </label>
 <label class="btn btn-primary">
  <input type="checkbox" autocomplete="off"> Checkbox 2
 </label>
 <label class="btn btn-primary">
  <input type="checkbox" autocomplete="off"> Checkbox 3
 </label>
</div>

I have a clear filter buttons which clears all the users inputs from the filters, resets all checkboxes, all drop downs, all text fields.

I was able to reset drop downs like this:

// sectorPicker is drop down
document.getElementById('sectorPicker').reset();

Below is the image of my checkboxes:

But I can't figure our how to reset the Bootstrap checkboxes on the screen to uncheck all checkboxes.

Any thoughts?

• javascript
• html
• twitter-bootstrap
• checkbox

4 Answers 4

this will remove the checked property and also active class from its parent label

$(":checkbox").prop('checked', false).parent().removeClass('active');

Try this, It will loop through all selected checkboxes and make them un checked. Or you can give each checkbox a class attr and then make loop over it.

     $( "input:checked" ).each(function(){
           $(this).removeAttr("checked");
           $(this).parent().removeClass("btn btn-primary");
            $(this).parent().removeClass('active');
           $(this).parent().addClass("btn btn-default");
     });

//Way two:

<div class="btn-group" data-toggle="buttons">
 <label class="btn btn-primary active">
  <input type="checkbox" class="mychk" autocomplete="off" checked> Checkbox 1 (pre-checked)
 </label>
 <label class="btn btn-primary">
  <input type="checkbox" class="mychk" autocomplete="off"> Checkbox 2
 </label>
 <label class="btn btn-primary">
  <input type="checkbox" class="mychk" autocomplete="off"> Checkbox 3
 </label>
</div>

$(".mychk").each(function(){
 $(this).removeAttr("checked");
});

As far as i know bootstrap checkboxes use properties instead of attributes.

$("[type='checkbox']").prop("checked", false) something like that should work.

$('#You_id_checkbox').removeAttr("checked");