js input复选框选中父级同时子级也选中

js实现复选框选中父级元素子级元素也选中，没有子级元素选中父级也不选中的效果

HTML

<tr>
            <td>
                <label>
                    <input name="rules[]" value="15" checked="checked" dataid="id-15" class="inverted checkbox-parent  " type="checkbox">
                    <span style="font-weight:bold; font-size:14px;" class="text">管理员</span>
                </label>
            </td>
            <tr>
                <td>
                    <label>&nbsp;&nbsp;&nbsp;
                        <input name="rules[]" value="16" checked="checked" dataid="id-15-16" class="inverted checkbox-parent  checkbox-child  " type="checkbox">
                        <span class="text">管理员列表</span>
                    </label>
                </td>
            </tr>
        </tr>
        <tr>
            <td>
                <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input name="rules[]" value="19" checked="checked" dataid="id-15-16-19" class="inverted checkbox-parent  checkbox-child  " type="checkbox">
                    <span class="text">管理员修改</span>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input name="rules[]" value="18" checked="checked" dataid="id-15-16-18" class="inverted checkbox-parent  checkbox-child  " type="checkbox">
                    <span class="text">管理员删除</span>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input name="rules[]" value="17" checked="checked" dataid="id-15-16-17" class="inverted checkbox-parent  checkbox-child  " type="checkbox">
                    <span class="text">管理员添加</span>
                </label>
            </td>
        </tr>

JS代码

<script type="text/javascript">
            /* 权限配置 */
            $(function() {
                //动态选择框，上下级选中状态变化
                //选中父级，所有子级也选中
                $('input.checkbox-parent').on('change', function() {
                    //动态选择框，上下级选中状态变化
                    var dataid = $(this).attr("dataid");
                    console.log(dataid);
                    $('input[dataid^=' + dataid + ']').prop('checked', $(this).is(':checked'));
                    //[dataid^=value]匹配指定属性以value开始的input元素，和正则^以xx开始相似
                    //prop()函数用于设置或返回当前jQuery对象所匹配的元素的属性值。
                    //is() 根据选择器、元素或 jQuery 对象来检测匹配元素集合，如果这些元素中至少有一个元素匹配给定的参数，则返回 true。
                });

                //子级选择状态
                $('input.checkbox-child').on('change', function() {
                    //获取子元素的dataid值
                    var dataid = $(this).attr("dataid");
                    //截取子元素的dataid值以最后一个“-”为终
                    dataid = dataid.substring(0, dataid.lastIndexOf("-"));
                    var parent = $('input[dataid=' + dataid + ']');
                    if($(this).is(':checked')) {
                        parent.prop('checked', true);
                        //循环到顶级
                        while(dataid.lastIndexOf("-") != 2) {
                            dataid = dataid.substring(0, dataid.lastIndexOf("-"));
                            parent = $('input[dataid=' + dataid + ']');
                            parent.prop('checked', true);
                        }
                    } else {
                        //没子元素勾选，父级也取消勾选
                        //父级
                        if($('input[dataid^=' + dataid + '-]:checked').length == 0) {
                            parent.prop('checked', false);
                            //循环到顶级
                            while(dataid.lastIndexOf("-") != 2) {
                                dataid = dataid.substring(0, dataid.lastIndexOf("-"));
                                parent = $('input[dataid=' + dataid + ']');
                                if($('input[dataid^=' + dataid + '-]:checked').length == 0) {
                                    parent.prop('checked', false);
                                }
                            }
                        }
                    }
                });
            });
        </script>