CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
Zach Smith
Zach Smith

Reputation: 5704

how to target ul li input checkbox items in javascript using .siblings()

I have the following javascript code that works perfectly for most checkboxes, where the script determines if more than 1 checkbox is selected and if so it hides the rest of the checkboxes:

var limit = 1;

$('input[type="checkbox"]').on('change', function(evt) {
    console.log('checkboxSelectedLimit: detects checkbox');
    if ($(this).siblings(':checked').length >= limit) {
        this.checked = false;
        console.log('too many checkboxes selected');
    }
});

using the following html structure:

<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 1<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5<br>

yet when I move my checkboxes into an ordered list like below:

<ul>
    <li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2</li>
    <li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3</li>
    <li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4</li>
    <li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5</li>
    <li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 1</li>
</ul>

my javascript does fire that it is checked, but th .siblings() doesn't seem to be firing as it does not work. i assume i am needing to update this script to target items in an ul li, yet when i change:

$('input[type="checkbox"]').on('change', function(evt)

to

$('ul li input[type="checkbox"]').on('change', function(evt)

it does not work.

any help would be greatly appreciated by someone smarter than myself.

Upvotes: 2

Views: 933

Answers (2)

John McMahon
John McMahon

Reputation: 1615

Rather then tying your selector to the dom structure which you may want to change again in the future and then break this all over again, I would recommend targeting the checkboxes by name.

So instead of this line:

if($(this).siblings(':checked').length >= limit) {

Try something like this:

if($('input[name=vehicle]:checked').length >= limit) {

Or even better, grab the input name dynamically using the name already in $(this):

if($('input[name=' + $(this).attr('name') + ']:checked').length >= limit) {

Upvotes: 1

user2930137
user2930137

Reputation: 63

The structure is li > input, so you need to find li objects instead.

var limit = 1;

    $('input[type="checkbox"]').on('change', function(evt) {
        console.log('checkboxSelectedLimit: detects checkbox');
        if($(this).parent().siblings().find("input[type=checkbox]:checked").length >= limit) {
            this.checked = false;
            console.log('too many checkboxes selected');
        }
        
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2</li>
<li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3</li>
<li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4</li>
<li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5</li>
<li><input class="single-checkbox"type="checkbox" name="vehicle" value="Bike">Level 1</li>
</ul>

Upvotes: 1

Related Questions