2

我有一个带有复选框的嵌套列表。使用第一个复选框，我想切换该列表中的所有复选框。我知道如何用 jQUery 切换它们，但我不知道如何选择它们。这就是问题所在，选择部分。

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

5 回答 5

3

假设我已正确阅读您的请求；

jQuery.siblings()

示例：http : //jsfiddle.net/52DBv/

于 2012-05-23T13:11:12.623 回答
0

你可以用这样的东西：

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");
    }
});​

你可以在这里看到一个现场工作演示，或者查看jsFiddle。通常情况下，有很多可能的解决方案，但这可能会奏效。

于 2012-05-23T13:17:51.697 回答
0

尝试这个：

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

编辑：对不起，现在为第二个列表工作。

于 2012-05-23T13:16:41.173 回答
0

您可以收集具有“列表”类的元素内的所有复选框，如下所示：

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

（您必须添加“切换”逻辑）

检查jq以获取更多信息 con jquery 复选框选择器。

于 2012-05-23T13:20:54.510 回答
0

尝试这样做：

$('.list').find('input:eq(0)'​)​.on('click', function(){        
    var $checkbox = $(this).is(':checked');
    $(this).closest('ul').find('input').attr('checked', $checkbox);
});​​​
于 2012-05-23T13:23:05.463 回答