2

質問：

一部のカテゴリに子があるカテゴリのリストがあります。クリックすると、同じカテゴリのすべての兄弟チェックボックスをオンにするすべてのカテゴリを作成しようとしています。

例えば; MUSICカテゴリの下にある[すべて] をクリックすると、チェックが入りますblues, jazz, rock n roll

コード：

HTML:

<ul name="events-categories" id="events-categories">
    <li><input type="checkbox" name="category-events" value="185" placeholder="" id="category-185" class="events-category"> CONVENTIONS
        <ul class="event-children">
            <li><input type="checkbox" name="child-category-all" value="" class="events-child-category-all">ALL</li>
            <li><input type="checkbox" name="child-category-190" value="190" id="child-category-190" class="child events-child-category">SCIENCE</li>
            <li><input type="checkbox" name="child-category-191" value="191" id="child-category-191" class="child events-child-category">TECHNOLOGY</li>
        </ul>
    </li>
    <li><input type="checkbox" name="category-events" value="184" placeholder="" id="category-184" class="events-category"> MUSIC
        <ul class="event-children">
            <li><input type="checkbox" name="child-category-all" value="" class="events-child-category-all">ALL</li>
            <li><input type="checkbox" name="child-category-189" value="189" id="child-category-189" class="child events-child-category">BLUES</li>
            <li><input type="checkbox" name="child-category-188" value="188" id="child-category-188" class="child events-child-category">JAZZ</li>
            <li><input type="checkbox" name="child-category-187" value="187" id="child-category-187" class="child events-child-category">ROCK N ROLL</li>
        </ul>
    </li>
    <li><input type="checkbox" name="category-events" value="186" placeholder="" id="category-186" class="events-category"> TRIBUTES</li>
</ul>​

CSS:

.event-children {
    margin-left: 20px;
    list-style: none;
    display: none;
}​

これまでのjQuery：

/**
 * left sidebar events categories
 * toggle sub categories
 */
$('.events-category').change( function(){
    console.log('showing sub categories');
    var c = this.checked;
    if( c ){
        $(this).next('.event-children').css('display', 'block');
    }else{
        $(this).next('.event-children').css('display', 'none');
    }
});

$('.events-child-category-all').change( function(){
    var c = this.checked;
    if( c ){
        $(this).siblings(':checkbox').attr('checked',true);
    }else{
        $(this).siblings(':checkbox').attr('checked',false);
    }
});​

jsfiddle: http://jsfiddle.net/SENV8/

4

4 に答える 4

7 
$('.events-child-category-all').change( function(){
    $(this).parent().siblings().find(':checkbox').attr('checked', this.checked);
});​

http://jsfiddle.net/SENV8/3/

于 2012-06-05T04:33:33.737 に答える
0

必要なのはこれですcheckboxes。siblings

$('.events-child-category-all').change( function(){
    var c = this.checked;
    if( c ){
        $(this).closest('.event-children').find(':checkbox').attr('checked',true);
    }else{
        $(this).closest('.event-children').find(':checkbox').attr('checked',false);
    }
});​

働くフィドル

于 2012-06-05T04:31:45.930 に答える
0

おそらく次のようなものです：

$(".events-child-category-all").click(function() {
   $(this).closest("ul").find("input[type=checkbox]").prop("checked",this.checked);
});

この.closest()メソッドは、DOM ツリーを上に移動して一致する要素を探します。この場合は、チェックボックスが配置されている「ul」を見つけます。

1.6 より古いバージョンの jQuery を使用している場合は、.attr()代わりに.prop().

于 2012-06-05T04:32:03.600 に答える
0

http://jsfiddle.net/ahren/SENV8/2/

$('.events-child-category-all').change( function(){
    var c = this.checked;
    if( c ){
        $(this).parent().siblings().find(':checkbox').prop('checked',true);
    }else{
        $(this).parent().siblings().find(':checkbox').prop('checked',false);
    }
});​

発火元siblingsの入力にはありません。change最初に親まで 1 レベル上に移動しli、それを取得して、チェックボックスを取得するためsiblingsに使用find()する必要があります。children()または、代わりに使用できますfind()

于 2012-06-05T04:32:10.050 に答える