首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

复选框的嵌套功能

2014-01-08 
【求助】复选框的嵌套功能我想达到的功能是点全选,下面的框全部选中,点分组1,则分组1下面的选中,点分组2,则

【求助】复选框的嵌套功能
复选框的嵌套功能
我想达到的功能是点全选,下面的框全部选中,点分组1,则分组1下面的选中,点分组2,则分组2下面的选中
分组1或分组2中任意一个没选中,全选框则不选中,分组1或者分组2的框也不选中.
最后取得选中的框的值
[解决办法]

引用:

<table>
    <ul>
        <li>
            <lable><input name="all" value="all" type="checkbox"/>all</lable>
            <ul id="childs">
                <li><lable><input name="a" value="1" type="checkbox"/>1</lable>
                    <ul>
                        <li><lable><input name="a" value="1-1" type="checkbox"/>1-1</lable></li>
                        <li><lable><input name="a" value="1-2" type="checkbox"/>1-2</lable></li>
                        <li><lable><input name="a" value="1-3" type="checkbox"/>1-3</lable></li>
                    </ul>
                </li>
                <li><lable><input name="a" value="2" type="checkbox"/>2</lable>
                    <ul>
                        <li><lable><input name="a" value="2-1" type="checkbox"/>2-1</lable></li>
                        <li><lable><input name="a" value="2-2" type="checkbox"/>2-2</lable></li>
                        <li><lable><input name="a" value="2-3" type="checkbox"/>2-3</lable></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</table>
<script>
    var childs = $("#childs"),
        all = $("input[type=checkbox][name='all']"),
        childCount =  childs.find("input[type=checkbox]").length;
    $("input[type=checkbox]").change(function(){
        var _this = $(this);
        if(this.value.indexOf("-") === -1){
            _this.closest("li").find("ul input[type=checkbox]").prop("checked",_this.is(":checked"));
        } else {
            var _ul = _this.closest("ul");
            _ul.closest("li")
                    .find("input[type=checkbox]:first")
                    .prop("checked",_ul.find("input[type=checkbox]:checked").length === _ul.find("input[type=checkbox]").length);
        }


        if(this.name !== "all")
            all.prop("checked",childs.find("input[type=checkbox]:checked").length === childCount);
        return false;
    });
</script>


不要return false

热点排行