How to update siblings checkbox with JavaScript?

Question

I am attempting to implement JavaScript to update the checkbox siblings in it's corresponding div. I have multiple div's that have the same checkbox options: #check_all_checkboxes, #check_none, and .others. I want the div to update their siblings, but the JavaScript will not update the siblings. I can hardcode the sibling class or id and the JavaScript will successfully execute on the first div, but not on the successive div's.

    // Select ALL checkboxes
    $('#check_all_checkboxes').click(function () {
        if ( $(this).is(':checked') ){
            $(this).siblings('.others').prop('checked', true);
            $(this).siblings('#check_none').removeAttr('checked');
        }
    });

    // Select NO checkbox(es)
    $('#check_none').click(function () {
        if ( $(this).is(':checked') ){
            $(this).siblings('.others').removeAttr('checked');
            $(this).siblings('#check_all_checkboxes').removeAttr('checked');
        }
    });

    // Select other checkbox(es)
    $('.others').click(function () {
        $(this).siblings('#check_none').removeAttr('checked');
        $(this).siblings('#check_all_checkboxes').removeAttr('checked');
    });

Please show associated html. We can't determine proper traverses without seeing it. Am guessing that you are repeating ID's in page but they must be unique by definition — charlietfl, Aug 10 '15 at 23:45

score 1 · Answer 1 · edited May 23 '17 at 10:26

1

This post suggests you may be better served with .prop('checked', false) : .prop('checked',false) or .removeAttr('checked')?

edited May 23 '17 at 10:26

Community

1
1

answered Aug 10 '15 at 23:50

ktwd

77
1
9

score 0 · Answer 2 · answered Aug 11 '15 at 00:55

With the advice of charlietfl on the use of unique ID's and not repeating ID's. I was able to get this working with using class.

// Select ALL checkboxes
$('.check_all_checkboxes').click(function () {
  if ( $(this).is(':checked') ){
    $(this).siblings('.others').prop('checked', true);
    $(this).siblings('.check_none').removeAttr('checked');
  }
});

// Select NO checkbox(es)
$('.check_none').click(function () {
  if ( $(this).is(':checked') ){
    $(this).siblings('.others').removeAttr('checked');
    $(this).siblings('.check_all_checkboxes').removeAttr('checked');
  }
});

// Select other checkbox(es)
$('.others').click(function () {
  $(this).siblings('.check_none').removeAttr('checked');
  $(this).siblings('.check_all_checkboxes').removeAttr('checked');
});

<div id="1">
    Div ID 1<br>
    <input type="checkbox" class="check_all_checkboxes">Select All<br>
    <input type="checkbox" class="check_none">Select None<br>
    <input type="checkbox" class="others">Select other1<br>
    <input type="checkbox" class="others">Select other2<br>
    <input type="checkbox" class="others">Select other3<br>   
</div>        

<hr>        
        
<div id="2">
    Div ID 2<br>
    <input type="checkbox" class="check_all_checkboxes">Select All<br>
    <input type="checkbox" class="check_none">Select None<br>
    <input type="checkbox" class="others">Select other1<br>
    <input type="checkbox" class="others">Select other2<br>
    <input type="checkbox" class="others">Select other3<br>   
</div>

How to update siblings checkbox with JavaScript?

2 Answers2