CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapcheckbox
Limon
Limon

Reputation: 1793

check/uncheck bootstrap checkboxes with jQuery

I've made another post yesterday and had no success with it. I will try now to reorder de idea and to ask again since I can't find the solution for this (I'm a newbie and I'm trying really hard).

The thing is that I'm working with this template based on Bootstrap, and this is the code that I can see directly from one of the files and that I'm using on my project:

html snippet:

<div class="hide" id="states">
  <div class="control-group">                           
    <label class="control-label">Seleccione</label>
      <div class="controls">
        <label class="checkbox span4">
          <input type="checkbox" value="all" id="allstates" name="all"/>Todas
        </label>

        <label class="checkbox span4">
          <input class="states" type="checkbox" value="Caba" id="" name="st[]"/>Ciudad Autónoma de Buenos Aires
        </label>

        <label class="checkbox span4">
          <input class="states" type="checkbox" value="Buenos Aires" id="" name="st[]"/> Buenos Aires
        </label>

        <label class="checkbox span4">
          <input class="states" type="checkbox" value="Catamarca" id="" name="st[]"/> Catamarca
        </label>
      </div>
    </div>
  </div>

After lot of searching I have founded when inspecting it that my code looks like this (snippet):

<div class="controls">
  <label class="checkbox span4">
    <div class="checker" id="uniform-allstates">
      <span>
        <input type="checkbox" value="all" id="allstates" name="all">
      </span>
    </div>Todas
  </label>

  <label class="checkbox span4">
    <div class="checker">
      <span>
        <input class="states" type="checkbox" value="Caba" id="" name="st[]">                          
       </span>
    </div> Ciudad Autónoma de Buenos Aires
  </label>

  <label class="checkbox span4">
    <div class="checker">
      <span>
        <input class="states" type="checkbox" value="Buenos Aires" id="" name="st[]">                           
      </span>
    </div> Buenos Aires
  </label>

  <label class="checkbox span4">
    <div class="checker">
      <span>
        <input class="states" type="checkbox" value="Catamarca" id="" name="st[]">                             
      </span>
    </div> Catamarca
  </label>
</div>

As you can see, another div and another span are added (seriously don't know why or how) so I'm guessing now it's some DOM problem the one I'm having.

This is snippet of my js file:

$('#allstates').click(function() {
  $('.checkbox').find('span').addClass('checked');
});

So this function selects ALL the checkboxes I have (even though the ones that I don't want because they belong to another category).

I want to know why the div and span are added and how to select only the checkboxes that I want.

For that I've been trying code like this but no success:

test 1

$('#allstates').click(function() {
  if ($(this).is(':checked')) {
    $('span input').attr('checked', true);
  } else {
    $('span input').attr('checked', false);
  }
});

test2

$('#allstates').click(function() {
  $(".states").prop("checked",$("#allstates").prop("checked"))
});

and so other ones that I erased.

NOTE: No js errors are being displayed when inspecting

Upvotes: 12

Views: 92670

Answers (4)

Anh Le Hoang
Anh Le Hoang

Reputation: 81

Simple bootstrap checkbox

<label><input type="checkbox" value="">Option 1</label>

When debug in Chrome dev tool, label look like https://tinker.press/images/bootstrap-checkbox-label-2017-01-17_084755.png

To toogle checkbox state just set true|false on lable.control.checked

label.control.checked = false; //uncheck
label.control.checked = true; //check

Video demo https://youtu.be/3qEMFd9bcd8

Upvotes: 2

Mufaddal Saifee
Mufaddal Saifee

Reputation: 121

Also it is important to add prop to true on selecting checkboxes:

$("#checkAll").click(function(){
   var check = $(this).prop('checked');
   if(check == true) {
     $('.checker').find('span').addClass('checked');
     $('.checkbox').prop('checked', true);
   } else {
     $('.checker').find('span').removeClass('checked');
     $('.checkbox').prop('checked', false);
   }
});

Upvotes: 12

Limon
Limon

Reputation: 1793

Since I mentioned that this function checked all the checkboxes I had (even though the ones that were not supposed to be checked), I've been trying to look for the solution:

$('#allstates').click(function() {
  $('.checkbox').find('span').addClass('checked');
});

But this is not what I wanted. I mentioned also that I noticed that the code was "different" when inspecting it (in Chrome with F12). So as @thecbuilder said, it changes in order to add style.

I realized that since code is changing... I had to change the class (checkbox) from which I was starting the "span tag" search, so I change class checkbox to id states and this is the result:

$('#allstates').click(function() {
  if($(this).attr("checked")){
    $('#states').find('span').addClass('checked');        
  }else{
    $('#states').find('span').removeClass('checked');
  }    
});

Now it finally works.

Upvotes: 7

Erik Philips
Erik Philips

Reputation: 54628

I think you are looking for code like:

$(document).ready(function()
{
    $("#allstates").on("change", function()
    {
        var checked = $(this).prop("checked");

        $(this).parents(".controls")
            .first()
            .find("input[type=checkbox]")
            .prop("checked", checked);
    });
});

JsFiddle Example

When the state of the checkbox with the id allstates changes, get the checkbox value, find the first parent html element with a class called controls and then only update all the checkboxes in that element with the value of checked.

Upvotes: 3

Related Questions