0

子供のチェックボックスを自動的にオフまたはオンにしたい:

HTML:

<ul>
    <li>1 <input type='checkbox' /></li>
    <ul>
        <li>1.1 <input type='checkbox'' /></li>
    </ul>
    <ul>
        <li>1.1.1 <input type='checkbox' /></li>
    </ul>
</ul>

Javascript:

$('li input').change(function(){
    if($(this).is(":checked")){
        $(this).parent().next().children("li").children("input").attr("checked", true);
        console.log("checked")
    }else{
        $(this).parent().next().children("li").children("input").attr("checked", false);
        console.log("not checked")
    }
})

しかし、それは最初の発生に対してのみ機能します。1.1の変更とイベントの変更がトリガーされないため、理由がわかりません

http://jsfiddle.net/D8ZdU/

ありがとう

4

3 に答える 3

1

最も近い方法を使用できます：

$('ul input').change(function(){
   var $this = $(this).closest('ul');
   $this.add($this.nextAll()).find("input").prop("checked", this.checked);
})

http://jsfiddle.net/LpGsS/

liマークアップには変更が必要であることに注意してください。要素を使用しないのはなぜですか?

<ul>
    <li>1 <input type='checkbox' /></li>
    <li>1.1<input type='checkbox' /></li>
    <li>1.1.1 <input type='checkbox' /></li>
</ul>


$('ul input').change(function(){
    $(this).parent().nextAll().find("input").prop("checked", this.checked);
})

http://jsfiddle.net/JjvKH/

于 2012-12-15T14:57:21.643 に答える
1

HTML を修正すると、次のようになります。

<ul>
    <li>1 <input type="checkbox" />
        <ul>
            <li>1.1 <input type="checkbox" />
                <ul>
                    <li>1.1.1 <input type="checkbox" /></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

次に、次の jQuery が機能します。

$('input:checkbox').change(
    function(){
        var state = this.checked ? true : false;
        $(this).next('ul').find('input:checkbox').prop('checked', state);
    });​

JS フィドルのデモ。

HTML の問題は、要素が別の 要素または要素ulの有効な子ではないことです。(and )の唯一の有効な子要素は要素であり、それが 内に含まれていない限り、他のすべては無効です。ulolulollili

参考文献:

于 2012-12-15T14:57:31.313 に答える
0

最初のチェックボックスの場合、「親」は<li>外側にあるもの<ul>です。他の人にとって、彼らの「親」は<li>別の人に孤立しているもの<ul>であり、「次」はありません。

于 2012-12-15T14:50:03.500 に答える