[RESOLVED]Checkbox tree using jquery

Hi,

I am looking for tree with checkbox, that having feature like when I checked the parent checkbox all the child checkboxes should automatically checked. And vice versa like when I checked all the child checkboxes parent checkbox should be checked. And when
some child checkboxes selected then parent checkbox shoul be grayed out.

 

please help me out. thanks in advance..

 

 

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("input:checkbox").click(function(){
   alert($(this).parent().prop("id"));
  alert($(this).next().is("ul"));
  if($(this).next().is("ul")){
  $(this).next().children("li").children("input:checkbox").prop("checked",$( this ).prop( "checked"));
  $(this).next().children("li").children("ul").children("li").children("input:checkbox").prop("checked",$( this ).prop( "checked"));
  $(this).next().children("li").children("ul").children("li").children("ul").children("li").children("input:checkbox").prop("checked",$( this ).prop( "checked"));
  }
    //alert($(this).children(first-child).prop("id"));
  //alert($(this).prop("id"));
 // $(this).children().children("input:checkbox").prop("checked",$( this ).prop( "checked"));
//$(this).children().has("input:checkbox").prop("checked",$( this ).prop//( "checked"));
//$( "#1" ).prop( "checked", $( this ).prop( "checked"));
  });
});
</script>
</head>
<body>
<ul id="1I">
	<li id="0" >
	<input type="checkbox" id="r0" /> Root-0
	<ul id="ul">
	<li id="1" >
	<input type="checkbox" id="r1" /> Root-1
	<ul id="12" >
		<li id="122" > <input type="checkbox" id="r11" />Child1</li>
		<li id="122" ><input type="checkbox" id="r12" />Child2
			<ul id="usxh1" >
				<li id="d1" ><input type="checkbox" id="r111" />Child11</li>
				<li id="sd1" ><input type="checkbox" id="r112" />Child12</li>
			</ul>
		</li>
		<li><input type="checkbox" id="r13" />Child3</li>
	</ul>
	</li>
	<li id="11" ><input type="checkbox" id="r2" /> Root-2
	<ul>
	<li><input type="checkbox" id="r21" />Child21</li>
	<li><input type="checkbox" id="r22" />Child22</li>
	<li><input type="checkbox" id="r23" />Child23</li>
	</ul>
	</li>
	</ul></li>
</ul>
</body>
</html>

 

Are these what you are after 

http://jsfiddle.net/kXYuU/310/
http://jsfiddle.net/FAYJS/104/
http://jsfiddle.net/JfMCP/198/

Thanks for your reply. But it is not what actually I am looking for. My solution is :

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("input:checkbox").click(function(){
     if($(this).next().is("ul")){
		$(this).next().find("input:checkbox").prop("checked",$(this).prop("checked") );
		$( this ).parents().each( function( index, element )
		{    
				if($(this).is("ul")){
					//alert("ul");
					//alert($( this ).parent().is("li"));
					var parentcheckbox= $( this ).parent().children("input:checkbox");
					//alert("get children");
					//alert(parentcheckbox.prop("checked"));
					parentcheckbox.prop("checked",true) ;
					
					$( this ).find("input:checkbox").each( function( index, element ){
						if(!$(this).prop("checked"))
						{
						parentcheckbox.prop("checked",false) ;
						}
					});							
				}
				if($(this).is("li")){
				//alert("li");
				}
				if($(this).is("input:checkbox")){
				//alert("check");
				}
		});	
	}	
	
	 if(! $(this).next().is("ul")){
		$( this ).parents().each( function( index, element )
		{    
				if($(this).is("ul")){
					var parentcheckbox= $( this ).parent().children("input:checkbox");
					parentcheckbox.prop("checked",true) ;
						$( this ).find("input:checkbox").each( function( index, element ){
						if(!$(this).prop("checked"))
						{
						parentcheckbox.prop("checked",false) ;
						}
					});							
				}
				if($(this).is("li")){
				//alert("li");
				}
				if($(this).is("input:checkbox")){
				//alert("check");
				}
		});	
	}
	
	});
});
</script>
</head>
<body>
<ul id="1I">
	<li id="0" >
		<input type="checkbox" id="r0" /> Root-0
		<ul id="ul">
			<li id="1" >
			<input type="checkbox" id="r1" /> Root-1
			<ul id="12" >
				<li id="122" > <input type="checkbox" id="r11" />Child1</li>
				<li id="122" ><input type="checkbox" id="r12" />Child2
				<ul id="usxh1" >
					<li id="d1" ><input type="checkbox" id="r111" />Child11</li>
					<li id="sd1" ><input type="checkbox" id="r112" />Child12</li>
					<li id="sd4" ><input type="checkbox" id="r114" />Child14
					<ul id="usxh14" >
						<li id="d14" ><input type="checkbox" id="r1114" />Child11</li>					
					</ul>
					</li>
					<li id="sd1" ><input type="checkbox" id="r113" />Child13</li>
				</ul>
				</li>
			</ul>
			</li>
			<li id="11" ><input type="checkbox" id="r2" /> Root-2
			<ul>
				<li><input type="checkbox" id="r21" />Child21</li>
				<li><input type="checkbox" id="r22" />Child22</li>
				<li><input type="checkbox" id="r23" />Child23</li>
			</ul>
			</li>
		</ul>		
	</li>
	<li id="11" ><input type="checkbox" id="r2" /> Root-2
	<ul>
	<li><input type="checkbox" id="r21" />Child21</li>
	<li><input type="checkbox" id="r22" />Child22</li>
	<li><input type="checkbox" id="r23" />Child23</li>
	</ul>
	</li>
</ul>
</body>
</html>

Leave a Reply