I have a list of checkboxes like so:

<div class="checkbox-list">
     <label><input type="checkbox" value="" /> All items</label><br />
     <label><input type="checkbox" value="1" /> First item</label><br />
     <label><input type="checkbox" value="2" /> Second item</label><br />
     <label><input type="checkbox" value="3" /> Third item</label><br />
     <label><input type="checkbox" value="4" /> Forth Checkbox</label>
</div>

The behavior I am looking for is if I select the first checkbox in this div (.checkbox-list input[type=checkbox]:first) all other checkboxes after is checked off. Likewise if I select any other than the first, the first one is deselected.

I am struggling on how to check if the first one is clicked on?

$(".checkbox-list").on("change", "input[type=checkbox]", function () {
    if ($(this).first()) { // <- not working - how do I know if I clicked the first one?
        $("input[type=checkbox]:checked", ".checkbox-list").not(this).prop("checked", false);
        $(this).prop("checked", true);
    } else {
         // Uncheck first checkbox
    }
});

Here is a fiddle if you wish to play around: /

I have a list of checkboxes like so:

<div class="checkbox-list">
     <label><input type="checkbox" value="" /> All items</label><br />
     <label><input type="checkbox" value="1" /> First item</label><br />
     <label><input type="checkbox" value="2" /> Second item</label><br />
     <label><input type="checkbox" value="3" /> Third item</label><br />
     <label><input type="checkbox" value="4" /> Forth Checkbox</label>
</div>

The behavior I am looking for is if I select the first checkbox in this div (.checkbox-list input[type=checkbox]:first) all other checkboxes after is checked off. Likewise if I select any other than the first, the first one is deselected.

I am struggling on how to check if the first one is clicked on?

$(".checkbox-list").on("change", "input[type=checkbox]", function () {
    if ($(this).first()) { // <- not working - how do I know if I clicked the first one?
        $("input[type=checkbox]:checked", ".checkbox-list").not(this).prop("checked", false);
        $(this).prop("checked", true);
    } else {
         // Uncheck first checkbox
    }
});

Here is a fiddle if you wish to play around: http://jsfiddle/4c7aubqL/1/

• javascript
• jquery
• checkbox

Share Improve this question Follow asked Apr 6, 2015 at 10:05 janhartmannjanhartmann 15k1717 gold badges8787 silver badges140140 bronze badges 3

• Just a quick one: are you checkboxes created dynamically? – Roko C. Buljan Commented Apr 6, 2015 at 10:11
• Yes, populated from ajax – janhartmann Commented Apr 6, 2015 at 10:17
• 1 In that case I had do edit my answer to keep events alive using the proper .on() delegation (just like you did). Edited. – Roko C. Buljan Commented Apr 6, 2015 at 10:21

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

jsBin demo

$(".checkbox-list").on("change", ":checkbox", function() {
    var $all   = $(".checkbox-list").find(":checkbox");
    var $first = $all.eq(0);
    if ($first.is(":checked")) { 
        $all.not(this).prop("checked", false);
    }
});

You should be using radio buttons, not checkboxes. That will do exactly what you want, with no additional effort on your part. Even if you succeed in what you are trying to do, the user interface will look wrong.