Question

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>

Answer 1

假设我正确阅读了你的请求;

jjury < a href=" http://api.jquery.com/siblings/" rel=" no follow"\\\ code>.siblings ()

发件人:"http://jsfiddle.net/52DBv/"rel="no follow" >http://jsfiddle.net/52DBv/

Answer 2

尝试此 :

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

< 强势 > 编辑 : 抱歉, 现在为第二个列表工作。

Answer 3

你可以用这样的东西去:

<% 1 > 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>

< 强力 > 标注

$(".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.

Answer 4

您可以在包含类“列表”的元素内收集所有复选框如下:

$( .list input:checkbox )

所以,这样的事情应该有用:

    <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>

(您必须添加“ 切换” 逻辑)

检查 < a href=> "http://api.jquery.com/ checkbox-selector/" rel="nofollow" >jq 以获取更多信息, conjquery 复选框选择器。

Answer 5

尝试做到这一点 :

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

友情链接