jqueryのを達成するために、マスターボックスから選択します

<!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:I一年生のチェックボックスが選択されていませんが、グレードの背後にある言語や数学ボックスの最初の選択肢は、対応するチェックボックスの最初の年は自動的に選択されます。

選択プロセスからマスターのこの実現。

注意:プレゼンテーションは、直接ファイルをHTMLに上記のコードをコピーすると、その後の名前を紹介しjqueryのコアライブラリをすることができjqueryの-1.4.1.min.js。

注:上記の結果の間のローカルコピーに直接コードは、その後に置か実証

ます。https://my.oschina.net/mapsh/blog/598133で再現

おすすめ

転載: blog.csdn.net/weixin_33716557/article/details/91691120