CODEWITHSUNDEEP
javascriptjqueryhtml
user2263104
user2263104

Reputation: 109

Unusual checkbox is checked behavior

HTML:

<input type="checkbox" id="1" val="1" onclick="select_box(id);" name="main_vals[]">Box 1
<input type="checkbox" class="sub_checkbox_1" val="1.1" name="sub_vals[]">Sub box 1
<input type="checkbox" class="sub_checkbox_1" val="1.1" name="sub_vals[]">Sub box 1
<input type="checkbox" class="sub_checkbox_1" val="1.1" name="sub_vals[]">Sub box 1
<input type="checkbox" id="2" val="2" onclick="selec_boxt(id);" name="main_vals[]">Box 2
<input type="checkbox" class="sub_checkbox_2" val="2.1" name="sub_vals[]">Sub box 2
<input type="checkbox" class="sub_checkbox_2" val="2.1" name="sub_vals[]">Sub box 2
<input type="checkbox" class="sub_checkbox_2" val="2.1" name="sub_vals[]">Sub box 2
<input type="checkbox" id="3" val="3" onclick="select_box(id);" name="main_vals[]">Box 3
<input type="checkbox" class="sub_checkbox_3" val="3.1" name="sub_vals[]">Sub box 3
<input type="checkbox" class="sub_checkbox_3" val="3.1" name="sub_vals[]">Sub box 3
<input type="checkbox" class="sub_checkbox_3" val="3.1" name="sub_vals[]">Sub box 3

Javascript:

select_box = function(id) {
    if($('#main_checkbox_'+id).is(:checked)) {
        $('.sub_checkbox_'+id).each(function() {
           this.checked = true;
       });
    } else {
        $('.sub_checkbox_'+id).each(function() {
          this.checked = false;
      });
    }
}

Description:

As you can see, i have multiple checkboxes. My goal here is to check if the checkbox with id main_checkbox_+id is checked, then all the corresponding checkboxes with id sub_checkbox_+id should also be checked. Similarly, if the main checkbox is unchecked, the corresponding sub checkboxes should be unchecked. While this seems to be working for the majority of the main and sub checkboxes, there are a few which don't work as expected. With those few, the check to see if the main_checkbox is checked always yields false. I'm not sure why i am experiencing this behavior. I have many more checkboxes in the html in the same format. The ids are dynamically generated for all checkboxes.

Upvotes: 0

Views: 164

Answers (2)

rvandoni
rvandoni

Reputation: 3407

try with this:

HTML:

<input type="checkbox" id="1" class="main_checkbox_1" val="1" onclick="select_box(id);" name="main_vals[]">Box 1
<input type="checkbox" class="sub_checkbox_1" val="1.1" name="sub_vals[]">Sub box 1
<input type="checkbox" class="sub_checkbox_1" val="1.1" name="sub_vals[]">Sub box 1
<input type="checkbox" class="sub_checkbox_1" val="1.1" name="sub_vals[]">Sub box 1
<input type="checkbox" id="2" val="2" class="main_checkbox_2" onclick="select_box(id);" name="main_vals[]">Box 2
<input type="checkbox" class="sub_checkbox_2" val="2.1" name="sub_vals[]">Sub box 2
<input type="checkbox" class="sub_checkbox_2" val="2.1" name="sub_vals[]">Sub box 2
<input type="checkbox" class="sub_checkbox_2" val="2.1" name="sub_vals[]">Sub box 2
<input type="checkbox" id="3" val="3" class="main_checkbox_3" onclick="select_box(id);" name="main_vals[]">Box 3
<input type="checkbox" class="sub_checkbox_3" val="3.1" name="sub_vals[]">Sub box 3
<input type="checkbox" class="sub_checkbox_3" val="3.1" name="sub_vals[]">Sub box 3
<input type="checkbox" class="sub_checkbox_3" val="3.1" name="sub_vals[]">Sub box 3

JS:

select_box = function(id) {
    console.log(id);
       if($('.main_checkbox_'+id).is(":checked")) {
              $('.sub_checkbox_'+id).each(function() {
                     this.checked = true;
               });
        } else {
               $('.sub_checkbox_'+id).each(function() {
                      this.checked = false;
                });
        }
}

with id you pass the whole ID to the function, not just the number 1,2,3..so I changed the ID and added the class to the main checkbox, correcting the JS by consequence.

you can see a working fiddle here.

Upvotes: 0

Anton
Anton

Reputation: 32591

Get the attribute val by using this.getAttribute('val')

HTML

<input type="checkbox" id="main_checkbox_1" val="1" onclick="select_box(this.getAttribute('val'));" name="main_vals[]">Box 1
<input type="checkbox" class="sub_checkbox_1" val="1.1" name="sub_vals[]">Sub box 1
<input type="checkbox" class="sub_checkbox_1" val="1.1" name="sub_vals[]">Sub box 1
<input type="checkbox" class="sub_checkbox_1" val="1.1" name="sub_vals[]">Sub box 1
<input type="checkbox" id="main_checkbox_2" val="2" onclick="select_box(this.getAttribute('val'));" name="main_vals[]">

jQuery

select_box = function(id) {
       if($('#main_checkbox_'+id).is(':checked')) {
              $('.sub_checkbox_'+id).prop('checked',true);
        } else {
               $('.sub_checkbox_'+id).prop('checked',false);
        }
}

DEMO

But a better way to do this is using delegation and having containers like this

HTML

<div class="container">
    <input type="checkbox" class="main_checkbox" val="1" name="main_vals[]">Box 1
    <input type="checkbox" class="sub_checkbox" val="1.1" name="sub_vals[]">Sub box 1
    <input type="checkbox" class="sub_checkbox" val="1.1" name="sub_vals[]">Sub box 1
    <input type="checkbox" class="sub_checkbox" val="1.1" name="sub_vals[]">Sub box 1
</div>
<div class="container">
    <input type="checkbox" class="main_checkbox" val="2" name="main_vals[]">Box 2
    <input type="checkbox" class="sub_checkbox" val="2.1" name="sub_vals[]">Sub box 2
    <input type="checkbox" class="sub_checkbox" val="2.1" name="sub_vals[]">Sub box 2
    <input type="checkbox" class="sub_checkbox" val="2.1" name="sub_vals[]">Sub box 2
</div>
<div class="container">
    <input type="checkbox" class="main_checkbox" val="3" name="main_vals[]">Box 3
    <input type="checkbox" class="sub_checkbox" val="3.1" name="sub_vals[]">Sub box 3
    <input type="checkbox" class="sub_checkbox" val="3.1" name="sub_vals[]">Sub box 3
    <input type="checkbox" class="sub_checkbox" val="3.1" name="sub_vals[]">Sub box 3
</div>

jQuery

$('.main_checkbox').on('change',function(){
    $(this).siblings('.sub_checkbox').prop('checked',this.checked);
});

DEMO

Upvotes: 2

Related Questions