js对表格中的checkbox,进行全选中、部分选中，全不选中

aaron2007

浏览: 5510 次
性别:
来自: 北京

最近访客更多访客>>

ax6812786

dagf113225

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

常用技术

XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script language="JavaScript">
    //判断所有的checkbox的选中状态
    //@id : checkbox的id
    function checkedStatus(id){

        //获取checkbox，如果子节点没有设置id，就得不到一部分checkbox
        var temp = document.getElementById(id);

        //设置checkbox的下级checkbox的状态
        setChildCheckBox(temp);

        //设置checkbox的上级checkbox的状态
        setParentCheckBox(temp);
    }

    //获取checkbox的下级checkbox信息
    //@entity : checkbox的DOM对象
    function findChildCheckBox(entity){

        //存放下级checkbox的数组
        var chkArray = new Array();

        //判断是否有input标签
        if(document.getElementsByTagName("input")){

            //获取所有的input标签
            var inputs = document.getElementsByTagName("input");

            //遍历input标签，获取下级checkbox
            for(var i = 0; i < inputs.length; i++){
                var ele = inputs[i];

                //判断type是“checkbox”，并且checkbox的parentId等于entity的id
                if(ele.type == "checkbox" && ele.getAttribute("parentId") == entity.id){
                    chkArray.push(ele);
                }
            }
        }
        return chkArray;
    }

    //获取checkbox的同级checkbox信息
    //@entity : checkbox的DOM对象
    function findBrotherCheckBox(entity){

        //存放同级checkbox的数组
        var chkArray = new Array();

        //判断是否有input标签
        if(document.getElementsByTagName("input")){

            //获取所有的input标签
            var inputs = document.getElementsByTagName("input");

            //遍历input标签，获取同级checkbox
            for(var i = 0; i < inputs.length; i++){
                var ele = inputs[i];

                //判断type是“checkbox”，并且checkbox的parentId等于entity的parentId
                if(ele.type == "checkbox" && ele.getAttribute("parentId") == entity.getAttribute("parentId")){
                    chkArray.push(ele);
                }
            }
        }
        return chkArray;
    }

    //获取checkbox的上级checkbox信息
    //@entity : checkbox的DOM对象
    function findParentCheckBox(entity){

        //存放上级checkbox的对象
        var _element = null;

        //判断是否有input标签
        if(document.getElementsByTagName("input")){

            //获取所有的input标签
            var inputs = document.getElementsByTagName("input");

            //遍历input标签，获取上级checkbox
            for(var i = 0; i < inputs.length; i++){
                var ele = inputs[i];

                //判断type是“checkbox”，并且checkbox的id等于entity的parentId
                if(ele.type == "checkbox" && ele.id == entity.getAttribute("parentId")){
                    _element = ele;
                    break;
                }
            }
        }
        return _element;
    }

    //设置checkbox的下级checkbox的状态
    //@entity : checkbox的DOM对象
    function setChildCheckBox(entity){

        //entity的选中状态
        var status = entity.checked;

        //获取entity的下级checkbox
        var childList = findChildCheckBox(entity);

        //判断是否有下级
        if(childList.length > 0){

            //遍历下级checkbox，并设置状态
            for(var i = 0; i < childList.length; i++){
                childList[i].checked = status;

                //设置childList[i]的下级checkbox的状态
                setChildCheckBox(childList[i]);
            }
        }
    }

    //设置checkbox的上级checkbox的状态
    //@entity : checkbox的DOM对象
    function setParentCheckBox(entity){

        //entity的上级checkbox的选中状态
        var parentChecked = true;

        //获取entity的上级checkbox
        var parentCheckBox = findParentCheckBox(entity);

        //判断是否有上级
        if(parentCheckBox){

            //获取entity的同级checkbox
            var brotherList = findBrotherCheckBox(entity);

            //判断是否有同级
            if(brotherList.length > 0){

                //遍历同级checkbox
                for(var i = 0; i < brotherList.length; i++){

                    //如果同级的checkbox有未选中的状态，则设置上级的checkbox的状态为false
                    if(brotherList[i].checked == false){
                        parentChecked = false;
                        break;
                    }
                }
            }

            //设置上级checkbox的选中状态
            parentCheckBox.checked = parentChecked;

            //设置parentCheckbox的上级checkbox的状态
            setParentCheckBox(parentCheckBox);
        }
    }

</script>
</HEAD>

<BODY>
<table>
    <tr>


        <td colspan="2"><input type="checkbox" name="chkAllBill" id="chkAllBill" parentId="0" onclick="checkedStatus(this.id);">ALL</td>

    </tr>
    <tr>


        <td colspan="2"><input type="checkbox" name="chkBill" id="chkBill1" parentId="chkAllBill" value="chkBill1" onclick="checkedStatus(this.id);">Root111</td>
    </tr>
    <tr>
        <td> </td>
        <td>
            <table>
            <tr>
                <td colspan='2'>
                <input type="checkbox" name="chkMat1" id="chkMat11" parentId="chkBill1" value="chkMat11" onclick="checkedStatus(this.id);">Product111
                </td>
            </tr>
            <tr>
                <td> </td>
                <td>
                    <table>
                        <tr>
                            <td>
                                <input type="checkbox" id="chkMat11-1" parentId="chkMat11" onclick="checkedStatus(this.id);">childMat111
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="checkbox" id="chkMat11-2" parentId="chkMat11" onclick="checkedStatus(this.id);">childMat222
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="checkbox" id="chkMat11-3" parentId="chkMat11" onclick="checkedStatus(this.id);">childMat333
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="checkbox" id="chkMat11-4" parentId="chkMat11" onclick="checkedStatus(this.id);">childMat444
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" name="chkMat1" id="chkMat12" parentId="chkBill1" value="chkMat12" onclick="checkedStatus(this.id);">Product222</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="chkMat1" id="chkMat13" parentId="chkBill1" value="chkMat13" onclick="checkedStatus(this.id);">Product333</td>
            </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td colspan="2"><input type="checkbox" name="chkBill" id="chkBill2" parentId="chkAllBill" value="chkBill2" onclick="checkedStatus(this.id);">Root222</td>
    </tr>
    <tr>
        <td> </td>
        <td>
            <table>
            <tr>
                <td><input type="checkbox" name="chkMat2" id="chkMat21" parentId="chkBill2" value="chkMat21" onclick="checkedStatus(this.id);">Product111</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="chkMat2" id="chkMat22" parentId="chkBill2" value="chkMat22" onclick="checkedStatus(this.id);">Product222</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="chkMat2" id="chkMat23" parentId="chkBill2" value="chkMat23" onclick="checkedStatus(this.id);">Product333</td>
            </tr>
            </table>
        </td>
    </tr>
</table>
</BODY>
</HTML>

分享到：