CheckBoxDemo

最新推荐文章于 2022-07-12 16:49:34 发布

JellyBool

最新推荐文章于 2022-07-12 16:49:34 发布

阅读量1k

点赞数

分类专栏： Javascript/Jquery 文章标签： jauery

本文链接：https://blog.csdn.net/jellybool/article/details/50662136

版权

Javascript/Jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

 <table cellSpacing="1" cellPadding="1" width="90%" align="center" border="0" id="dataPopedom">
        <tr>
            <td class="ta_01" colspan=2 align="left" width="100%">
                全选/全不选
                <input type="checkbox" name="selectOperAll" onclick="checkAllOper(this)">
            </td>
        </tr>
        <tr>
            <td class="ta_01" align="left" width="18%" height="22">
                <input type="checkbox" name="selectoper" id="aa_aa" value="数据字典" onClick='goSelect(this.id)'>数据字典</input>
                <!--mid_mid-->
            </td>
            <td>
                <div>
                    <input type="checkbox" name="selectoper" id="aa_ab" value="编辑" onClick='goSelect(this.id)'>编辑</input>
                    <input type="checkbox" name="selectoper" id="aa_ac" value="保存" onClick='goSelect(this.id)'>保存</input>
                    <!--pid_mid-->
                </div>
            </td>
        </tr>
        </td>
        </tr>
        <tr>
            <td class="ta_01" align="left" width="18%" height="22">
                <input type="checkbox" name="selectoper" id="bb_bb" value="数据字典" onClick='goSelect(this.id)'>数据字典1</input>
                <!--mid_mid-->
            </td>
            <td>
                <div>
                    <input type="checkbox" name="selectoper" id="bb_ba" value="编辑" onClick='goSelect(this.id)'>编辑1</input>
                    <input type="checkbox" name="selectoper" id="bb_bc" value="保存" onClick='goSelect(this.id)'>保存1</input>
                    <!--pid_mid-->
                </div>
            </td>
        </tr>
        </td>
        </tr>
    </table>
</body>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<script type="text/javascript">
function checkAllOper(oper) {
    $("input[type='checkbox'][name='selectoper']").prop("checked", oper.checked);
}
//选中复选框，触发事件
function goSelect(id) {
    //按照_符号分隔
    console.log(id);
    var array = id.split("_");
    console.log(array);
    if (array[0] == array[1]) { //此时说明操作的（父）节点
        //选中父
        if ($("#" + id)[0].checked) {
            //子都选中
            $("input[type='checkbox'][name='selectoper'][id^='" + array[0] + "']").prop("checked", true);
        }
        //取消父
        else {
            //子都取消
            $("input[type='checkbox'][name='selectoper'][id^='" + array[0] + "']").prop("checked", false);
        }
    } else { //说明此时操作的子设置中的一个(子)
        //当选中子设置中的一个，则父一定被选中
        if ($("#" + id)[0].checked) {
            $("input[type='checkbox'][name='selectoper'][id^='" + array[0] + "'][id$='" + array[0] + "']").prop("checked", true);
        }
        //当取消子设置中的一个
        else {
            //先查找子设置的对象
            var $check = $("input[type='checkbox'][name='selectoper'][id^='" + array[0] + "']:not([id$='" + array[0] + "'])");
            //遍历子设置的对象
            /**
             * flag:用于判断当前子设置的对象是否有被选中
             *   * flag=false，子对象都没有被选中，此时父要被取消
             *   * flag=true，子对象中至少有一个被选中，此时不做任何操作
             */
            var flag = false;
            $check.each(function(index, domEle) {
                if (domEle.checked) {
                    flag = true;
                    return false;
                }
            })
            if (!flag) {
                $("input[type='checkbox'][name='selectoper'][id^='" + array[0] + "'][id$='" + array[0] + "']").prop("checked", false);
            }
        }
    }
}
</script>