html页面:
<button type='button' class='button'
onMouseOver="this.className='button_over';"
onMouseOut="this.className='button';"
onClick="SelectAllBox()">
<img src="./button/quanbuxz.png" border='0'
align='absmiddle'> 全部选中</button>
<button type='button' class='button'
<span style="white-space:pre"> </span>onMouseOver="this.className='button_over';"
onMouseOut="this.className='button';"
onClick="UnSelectAllBox()">
<img src="./button/quanbubxz.png" border='0'
align='absmiddle'> 全部不选中</button>
<button type='button' class='button'
onMouseOver="this.className='button_over';"
onMouseOut="this.className='button';"
onClick="document.ActionForm.submit();">
<img src="./button/baocun.png" border='0'
align='absmiddle'> 保存</button>
<button type='button' class='button'
onMouseOver="this.className='button_over';"
onMouseOut="this.className='button';"
onClick="parent.close();">
<img src="./button/guanbi.png" border='0'
align='absmiddle'> 关闭</button>
菜单项:
<fieldset style='padding:5px;clear:left;'>
<legend><input type='checkbox' class='checkbox' name='menuModule'
value='company,company' id='company_company'
onClick='goSelect(this.id)' title="客户管理" >客户管理
</legend>
<div><input type='checkbox' class='checkbox' name='menuModule'
value='company,base'
id='company_base' onClick='goSelect(this.id)'
title='客户拜访'>客户拜访</div>
<div><input type='checkbox' class='checkbox' name='menuModule'
value='company,linkMan'
id='company_linkMan' onClick='goSelect(this.id)'
title='联系人列表' >联系人列表</div>
<div><input type='checkbox' class='checkbox' name='menuModule'
value='company,linkTouch'
id='company_linkTouch' onClick='goSelect(this.id)'
title='联系记录列表' >联系记录列表</div>
<div><input type='checkbox' class='checkbox' name='menuModule'
value='company,rule'
id='company_rule' onClick='goSelect(this.id)'
title='客户查重设置 '>客户查重设置 </div>
</fieldset>
js代码:
<script language="javascript">
//全选中
function SelectAllBox(){
$("input[name=menuModule]").attr("checked","checked");
}
//全部不选中
function UnSelectAllBox(){
$("input[name=menuModule]").attr("checked",null);
}
function goSelect(id){
//获取到的值以","分割
var menuModule=$("#"+id).val();
var array=menuModule.split(",");
//alert(array[0]+" "+array[1]);
//分割的值不同,说明是子节点
if (array[0] != array[1]) {
/**如果一个子节点处于选中状态,那么父节点也要为选中状态**/
if($("#"+id)[0].checked){
//拼凑父节点的id,因为父节点的**_**是相同的
var superid=array[0]+"_"+array[0];
//设置父节点为选中状态
$("#"+superid).attr("checked","checked");
}else{
/**如果是子节点取消操作,那么就先要判断是否还是其他子节点是选中的
如果其他是选中的,那么父节点的选中状态就不用取消,否则,取消父节点的选中状态**/
var flag=false;
//得到其他子节点,除去本节点以外
var $sub=$("input[name=menuModule][value^="+array[0]+"]:not([value$="+array[0]+"])")
//* 遍历所有的子节点,检查有没有其他选中的
$sub.each(function(index,domEle){
if(domEle.checked){
flag=true;
}
});
//* 如果都没有被选中,则父节点处于不选中状态.
if(!flag){
//组织父id
var superid=array[0]+"_"+array[0];
$("#"+superid).attr("checked",null);
}
//* 如果至少有一个被选中,则父节点处于选中状态.
if(flag){
//不管
}
}
}
/** 如果操作是父节点**/
if (array[0] == array[1]) {
//* 如果父节点处于选中状态,则子节点处于选中状态.
if($("#"+id)[0].checked){
$("input[name=menuModule][value^="+array[0]+"]:not([value$="+array[0]+"])")
.attr("checked","checked");
}else{
//* 如果父节点处于不选中状态,则子节点处于不选中状态.
$("input[name=menuModule][value^="+array[0]+"]:not([value$="+array[0]+"])")
.attr("checked",null);
}
}
}
</script>
效果图:
修改了小小注释:
代码来自:冯威_AJAX视频教程_jquery处理权限