用jquery实现复选框主从选择

为什么80%的码农都做不了架构师？>>>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="jquery-1.4.1.min.js"></script>
 </HEAD>

 <BODY>
  
<li><input type="checkbox"  name="grades[]" id="1" value="1" stg="一年级" />一年级：
    <input type="checkbox" name="subjects[]" value="2" st="数学" />数学 
    <input type="checkbox" name="subjects[]" value="1" st="语文" />语文 
</li>
<li><input type="checkbox"  name="grades[]" id="2" value="2" stg="二年级" />二年级：
    <input type="checkbox" name="subjects[]" value="1" st="语文" />语文 
	<input type="checkbox" name="subjects[]" value="2" st="数学" />数学 
</li>
<li><input type="checkbox"  name="grades[]" id="3" value="3" stg="三年级" />三年级：
    <input type="checkbox" name="subjects[]" value="1" st="语文" />语文 
</li>
       <script>
	 $('[type=checkbox]').click(function (){
		  var child_leng=$(this).parent().children().length;
		  var i=1;
	   if($(this).attr('stg')){
		   if($(this).attr('checked')==true){
		     for(i=1;i<child_leng;i++){
				 $(this).parent().children(':eq('+i+')').attr('checked',true);
			  }
		   }else{
			 for(i=1;i<child_leng;i++){
				 $(this).parent().children(':eq('+i+')').attr('checked',false);
			  }
		   }
	   }else{
		  for(i=1;i<child_leng;i++){
			 if($(this).parent().children(':eq('+i+')').attr('checked')==true){
				 $(this).parent().children(':first').attr('checked',true);
					return true;
			 }else{
				 $(this).parent().children(':first').attr('checked',false);
			 }
		  }
	  }
	});
      </script>
 </BODY>
</HTML>

上面效果图片是这个html网页的最终效果图，主要用jquery去实现主从选择问题即：

1：当我选中一年级复选框时，一年级后面对应的数学和语文将同时全部选中
2：当一年级复选框和其后面的数学、语文复选框都为选中状态时，我先依次把一年级对应的数学和语文复选框去除选中，则对应的一年级复兴框也会自动去除选中状态。
3：当我未选择一年级复选框，而是先选择一年级后面的语文或者数学复选框时，则其对应的一年级的复选框会自动选择。

这样就实现了主从选择处理。

注：进行演示的时候，直接把上面的代码copy到html文件中，然后再引入一个名称为jquery-1.4.1.min.js的jquery核心函数库即可。

注：演示上面的效果时直接把代码copy到本地，然后放入一个

转载于:https://my.oschina.net/mapsh/blog/598133

用jquery实现复选框主从选择

猜你喜欢