CODEWITHSUNDEEP
jquerylistselectcheckbox
user1386906
user1386906

Reputation: 1179

Select elements with selectors in jQuery

I have a nested list with checkboxes. With the first checkbox i want to toggle all the checkboxes in that list. I know how to toggle them with jQUery but i don't know how to select them. Thats the problem, the selecting part. 

<ul>
    <li>
        <p> lorem ipsum </p>
        <ul class="list">
            <li><input type="checkbox"></li>
            <li><input type="checkbox"></li>
            <li><input type="checkbox"></li>
        </ul>
    </li>
    <li>
        <p> lorem ipsum </p>
        <ul class="list">
            <li><input type="checkbox"></li>
            <li><input type="checkbox"></li>
            <li><input type="checkbox"></li>
        </ul>
    </li>
 </ul>

Upvotes: 2

Views: 296

Answers (5)

jinmichaelr
jinmichaelr

Reputation: 883

Try to do this:

$('.list').find('input:eq(0)'​)​.on('click', function(){        
    var $checkbox = $(this).is(':checked');
    $(this).closest('ul').find('input').attr('checked', $checkbox);
});​​​

Upvotes: 0

caraca
caraca

Reputation: 205

You can collect all the checkbox inside an element with class "list" as follows:

$('.list input:checkbox')

So, something like this should work:

    <ul>
        <li>
            <p> lorem ipsum </p>
            <ul class="list">
                <li><input type="checkbox" onclick="$('.list input:checkbox').attr('checked', true);"></li>
                <li><input type="checkbox"></li>
                <li><input type="checkbox"></li>
            </ul>
        </li>
        <li>
            <p> lorem ipsum </p>
            <ul class="list">
                <li><input type="checkbox"></li>
                <li><input type="checkbox"></li>
                <li><input type="checkbox"></li>
            </ul>
        </li>
     </ul>

(you must add the "toggle" logic)

Check jq for more information con jquery checkbox selector.

Upvotes: 0

ramsesoriginal
ramsesoriginal

Reputation: 1920

You could go with something like this:

HTML:

<ul>
    <li>
        <p> lorem ipsum </p>
        <ul class="list">
            <li><input type="checkbox"></li>
            <li><input type="checkbox"></li>
            <li><input type="checkbox"></li>
        </ul>
    </li>
    <li>
        <p> lorem ipsum </p>
        <ul class="list">
            <li><input type="checkbox"></li>
            <li><input type="checkbox"></li>
            <li><input type="checkbox"></li>
        </ul>
    </li>
 </ul>​

Javascript

$(".list li:first-child input[type=checkbox]").click(function() {
    if (!this.checked) {
        $(this).parents(".list").find("input[type=checkbox]").removeAttr(    "disabled");
    } else {
        $(this).parents(".list").find("input[type=checkbox]").attr(    "disabled", true);
        $(this).parents(".list").find("li:first-child input[type=checkbox]"    ).removeAttr("disabled");
    }
});​

you can see a live working demo here, or look at the jsFiddle. As so often is the case, there are plenty of possible solutions, but this could work.

Upvotes: 0

Andr&#233; Gil
Andr&#233; Gil

Reputation: 624

Try this:

$(".list").find("input[type=checkbox]:first").on("click", function(){
    var cb = $(this);
    cb.parents(".list").find("input[type=checkbox]").attr("checked", cb.is(":checked"));
});​

Edit: Sorry, working for the second list now.

Upvotes: 0

bcmcfc
bcmcfc

Reputation: 26765

Assuming I have read your request correctly;

jQuery .siblings()

Exampe: http://jsfiddle.net/52DBv/

Upvotes: 3

Related Questions