CheckBoxDemo

来源:互联网 发布:linux如何编辑文档 编辑:程序博客网 时间:2024/06/05 16:24
 <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>
0 0
原创粉丝点击