Question

我想说：

<input id="album" name="album" type="checkbox" value="1" /> 
<label for="album">Albums</label><br> 
<ul> 
    <li> 
        <input id="albums_155596787784467" name="albums[155596787784467]" type="checkbox" value="1" /> 
        <label for="albums_155596787784467">Profile Pictures</label><br>        
    </li>                   
    <li> 
        <input id="albums_100358313308315" name="albums[100358313308315]" type="checkbox" value="1" /> 
        <label for="albums_100358313308315">Perfil</label><br>      
    </li>                   
</ul>

当用户选中第一个复选框时，我想要检查ul中的所有复选框。

此外，如果ul中的任何复选框设置为未选中，则第一个复选框应设置为不检查。

我使用JQuery。

编辑：

此外，如果选中ul内的所有复选框，则也应检查第一个复选框。

Answer 1

$("input[name='album']").change(function()
{
    if( $(this).is(':checked') )
    {
        $("input[type='checkbox']","ul").attr('checked',true);
    } else
    {
        $("input[type='checkbox']","ul").attr('checked',false);
    }
});

已编辑！

对于你的例子的第2部分：

$("input[type='checkbox']","ul").each(function()
{
    $(this).change(function()
    {
        if( ! $(this).is(':checked') )
        {
            $("input[name='album']").attr('checked',false);
        }
        $("input[name='album']").attr('checked',( $("input[type='checkbox']","ul").length == $("input[type='checkbox']:checked","ul").length ));
    });
});

Answer 2

最好给ul一个id并尝试下面的代码。

$(function(){
    $("#album").change(function(){
        $("#ulid input:checkbox").attr("checked", this.checked);
    });

    var childCheckBoxes = $("#ulid input:checkbox");
    var totalcheckBoxesCount = childCheckBoxes.length;

    childCheckBoxes.change(function(){
        var checkedBoxesCount = childCheckBoxes.filter(":checked").length;    
        $("#album").attr("checked", totalcheckBoxesCount === checkedBoxesCount);
    });
 });

Working demo

Answer 3

试试这个

$(document).ready(function(){
    $("#album").click(function(){
    if($('#album').is(':checked'))
        $("input[type=checkbox]").attr('checked','checked');
    else
        $("input[type=checkbox]").removeAttr('checked')
    });
});

Javascript：如果用户勾选复选框，那么如何选中所有嵌套复选框呢？

3 个答案: