jQuery之复选框

<!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" />
<title>无标题文档</title>
</head>
<script src="jquery/jquery-1.4.2.js"></script>
<body>
<fieldset>
 <legend>
 	<input type="checkbox" id="com_com" value="com,com" onclick="goselect(this.id)"/>客户管理
 </legend>
 <legend>
 	<input type="checkbox" id="com_bass" value="com,bass" onclick="goselect(this.id)"/>客户拜访
    <input type="checkbox" id="com_linkman" value="com,linkman" onclick="goselect(this.id)"/>联系人列表
    <input type="checkbox" id="com_linkTouch" value="com,linkTouch" onclick="goselect(this.id)"/>联系记录列表
    <input type="checkbox" id="com_rule" value="com,rule" onclick="goselect(this.id)"/>客户查重设置
 </legend>
</fieldset>
<hr />
<fieldset>
 <legend>
 	<input type="checkbox" id="tea_tea" value="tea,tea" onclick="goselect(this.id)"/>老师
 </legend>
 <legend>
 	<input type="checkbox" id="tea_stu1" value="tea,stu1" onclick="goselect(this.id)"/>学生甲
 	<input type="checkbox" id="tea_stu2" value="tea,stu2" onclick="goselect(this.id)"/>学生乙
    <input type="checkbox" id="tea_stu3" value="tea,stu3" onclick="goselect(this.id)"/>学生丙
    <input type="checkbox" id="tea_stu4" value="tea,stu4" onclick="goselect(this.id)"/>学生丁
 </legend>
</fieldset>
<input type="button" id="all" value="全选"/>
<input type="button" id="no" value="全不选"/>
</body>
</html>
<script language="javascript">
function goselect(id){
var array=id.split("_");//将id分隔为数组
if(array[0]==array[1]){//父类被点击
if($("#"+id)[0].checked)//dom对象判断父类是否选中
$("input[type=checkbox][id^="+array[0]+"]").attr("checked","checked");//所有子类被选中
else
$("input[type=checkbox][id^="+array[0]+"]").attr("checked",null);
}
else{//子类被选中
    var supid=array[0]+"_"+array[0];//父类id
   if($("#"+id)[0].checked){//如果传过来的子类id被选中
  $("#"+supid).attr("checked","checked");//则父类被选中
//等价于$("input[type=checkbox][id$="+array[0]+"]").attr("checked","checked");
   }
   else{//如果传过来的子类id未被选中,则遍历所有子类
   var flag=false;//判断子类是否有被选中的标志
   //获取子类
   var $children=$("input[type=checkbox][id^="+array[0]+"]:not([id$="+array[0]+"])");
   $children.each(function(index,domEle){
   if(this.checked){
 flag=true;
 return;
   }
   });
   if(!flag)//子类没有被选中的
       $("#"+supid).attr("checked",null);//父类则不被选中
}
   }
}
//全选
$("#all").click(function(){
$(":checkbox").attr("checked","checked");
});
//全不选
$("#no").click(function(){
$(":checkbox").attr("checked",null);
});
</script>
jQuery之复选框_第1张图片

你可能感兴趣的:(jQuery之复选框)