uncheck Bootstrap checkbox buttons - Pure JavaScript

Question

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?

kp singh · Accepted Answer · 2016-02-01 11:38:52Z

10

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

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

answered Feb 1, 2016 at 11:38

kp singh

1,4609 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Avenger Over a year ago

I needed a slightly different approach, maybe due to bootstrap version: $("#checkbox").prop('checked', false).parent().removeClass('checked');

Mahesh · Accepted Answer · 2016-02-01 11:43:52Z

3

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

edited Feb 1, 2016 at 11:43

answered Feb 1, 2016 at 11:34

Mahesh

1,0911 gold badge12 silver badges29 bronze badges

2 Comments

Skywalker Over a year ago

Thank you for the answer. I tried this but my checkboxes still remain highlighted. If you check my question I've posted an image. You can see they are highlighted as Blue even after clearing them.

Mahesh Over a year ago

That is your button class, you need to remove btn btn-primary class from label element, see my updated answer

mickiewicz · Accepted Answer · 2016-02-01 12:45:24Z

2

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

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

edited Feb 1, 2016 at 12:45

answered Feb 1, 2016 at 11:39

mickiewicz

2892 silver badges15 bronze badges

Comments

n4gys4nyi · Accepted Answer · 2016-02-01 11:35:12Z

1

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

answered Feb 1, 2016 at 11:35

n4gys4nyi

9351 gold badge7 silver badges22 bronze badges

Collectives™ on Stack Overflow

uncheck Bootstrap checkbox buttons - Pure JavaScript

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related