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

これを試してみてください：

$('.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 に答える
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"));
});​

編集：申し訳ありませんが、現在2番目のリストで作業しています。

于 2012-05-23T13:16:41.173 に答える
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」を持つ要素内のすべてのチェックボックスを収集できます。

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

（「トグル」ロジックを追加する必要があります）

jqueryチェックボックスセレクターの詳細については、jqを確認してください。

于 2012-05-23T13:20:54.510 に答える