jQuery选择/取消选择所有兄弟元素。

3
我想在第一个被选中时选择所有兄弟节点,如果取消选中第一个,则应取消选择所有兄弟节点。
但我无法解决它,所以欢迎任何指针 :)
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>           
    <ul>
    <li><input id="checkall" type="checkbox" />Select all</li>
    <li><input type="checkbox" />Child 1</li>
    <li><input type="checkbox" />Child 2</li>
    <li><input type="checkbox" />Child 3</li>
    <li><input type="checkbox" />Child 4</li>
</ul>

<script type="text/javascript">
            //clicking the first checkbox should check or uncheck all checkboxes in that element 
$(document).ready(function(){
    $('#checkall').click(function(){
        if ($(this).closest('ul').find('input:checkbox').attr('checked', false)) {
            $(this).closest('ul').find('input:checkbox').attr('checked', true)
        }
        else ($(this).closest('ul').find('input:checkbox').attr('checked', true)); {
            $(this).closest('ul').find('input:checkbox').attr('checked', false)
        }
    });
});
</script>
2个回答

4

非常基础:

    $('#checkall').click(function(){

       //select ul
       $(this).closest('ul')

        //find checkbox
        .find('> li > input[type=checkbox]') //or : input[type=checkbox]

         //not first check - is the 'select all'
        .not(':first')

         //set value
        .prop('checked', this.checked)
    });

简而言之:

$('#checkall').click(function(){
   $(this).closest('ul').find('> li > input[type=checkbox]').not(':first').prop('checked', this.checked)
});

3

.attr('checked', false)会将'false'的值设置为元素的选中属性,不会返回布尔值。你可以像这样简化你的代码。

$(document).ready(function(){
    $('#checkall').click(function(){
        $(this).closest('ul').find(':checkbox').attr('checked', this.checked);
    });
});

相关问题:我在选中时设置了一个新类,但我单击的复选框没有获得该类。?$(this).closest('ul').find('span').toggleClass('checked'); - Mackelito
尝试使用以下代码 $(this).closest('ul').find('span').toggleClass('checked', this.checked); - ShankarSangoli
在问题中会有一个复选框来标记它作为答案,然后提交。 - ShankarSangoli
我该如何让它在当前的ul中工作?(如果我添加另一个ul,它会选择第一个ul) - Mackelito
第一个之后..不嵌套 :) - Mackelito

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接