Articles → JQUERY → Check all checkboxes in tree view using jquery

Check all checkboxes in tree view using jquery






Prerequisite

























Steps Involved













Step 1. Create a website and add tree view control

on the page




<asp:TreeView runat="server" ShowLines="true" ID="tvTest">
    <Nodes>
        <asp:TreeNode ShowCheckBox="true" Text="S1" />
        <asp:TreeNode ShowCheckBox="true" Text="S2" />
        <asp:TreeNode ShowCheckBox="true" Text="S3" />
    </Nodes>
</asp:TreeView>





Step 2. Add checkbox on the page




<asp:CheckBox ID="chkCheckAll" Text="Check All" runat="server" />




<div id="MainContent_tvTest">
	<table cellpadding="0" cellspacing="0" style="border-width: 0;">
		<tr>
			<td> <img src="/CheckBox/WebResource.axd?d=wCIkQLRUdiPpOjT4WVbQbwDDcFuatoCBuaOBQc0ty6_EtAMRiaMrvZcyzyTdJzZsxMoQS92k-Y2FUynDKWHhfKeoCxzYpUwH3-bOjM41Px0StOyOFYPvILcuguhyPHcj0&t=635282307890123399" alt="" /> </td>
			<td style="white-space: nowrap;">
				<input type="checkbox" name="MainContent_tvTestn0CheckBox" id="MainContent_tvTestn0CheckBox" /><a class="MainContent_tvTest_0" href="javascript:__doPostBack('ctl00$MainContent$tvTest','sS1')" onclick="TreeView_SelectNode(MainContent_tvTest_Data, this,'MainContent_tvTestt0');" id="MainContent_tvTestt0">S1</a> </td>
		</tr>
	</table>
	<table cellpadding="0" cellspacing="0" style="border-width: 0;">
		<tr>
			<td> <img src="/CheckBox/WebResource.axd?d=0GddPqhJMdPmYZArqQmS6I-h8NLUYN6ms8-jUexR6V9Bmbc1wQsUyg_QEjVg1NBbKNTU2-SD529I-i9qwRMuyaniwPGRQ1o2rJtZqJEI_68eKHip_j5fE3f7VCx0Fdln0&t=635282307890123399" alt="" /> </td>
			<td style="white-space: nowrap;">
				<input type="checkbox" name="MainContent_tvTestn1CheckBox" id="MainContent_tvTestn1CheckBox" /><a class="MainContent_tvTest_0" href="javascript:__doPostBack('ctl00$MainContent$tvTest','sS2')" onclick="TreeView_SelectNode(MainContent_tvTest_Data, this,'MainContent_tvTestt1');" id="MainContent_tvTestt1">S2</a> </td>
		</tr>
	</table>
	<table cellpadding="0" cellspacing="0" style="border-width: 0;">
		<tr>
			<td> <img src="/CheckBox/WebResource.axd?d=BtEckLtfDTFnML2E4hgDa6uEI_dip9AdzKtTwCs-3qVghNR-viaTc2nM5HLcsJfCxqBWElQM6exDQXdSnOyrTLIgFVC9uhoZHIGsnIt9sG11x-PZ8c3Sn0MYL3jdCSPW0&t=635282307890123399" alt="" /> </td>
			<td style="white-space: nowrap;">
				<input type="checkbox" name="MainContent_tvTestn2CheckBox" id="MainContent_tvTestn2CheckBox" /><a class="MainContent_tvTest_0" href="javascript:__doPostBack('ctl00$MainContent$tvTest','sS3')" onclick="TreeView_SelectNode(MainContent_tvTest_Data, this,'MainContent_tvTestt2');" id="MainContent_tvTestt2">S3</a> </td>
		</tr>
	</table>
</div>



Step 3. Add jquery to check and uncheck checkboxes


<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script type="text/javascript">
       $(document).ready(function() {
	$("#<%=chkCheckAll.ClientID %>").change(function() {
		$("div#<%=tvTest.ClientID %>").find("table input:checkbox").each(function() {
			if($("#<%=chkCheckAll.ClientID %>").prop("checked") == true) {
				$(this).prop("checked", true);
			} else if($("#<%=chkCheckAll.ClientID %>").prop("checked") == false) {
				$(this).prop("checked", false);
			}
		});
	});
});           
</script>



Step 4. Output





Click to Enlarge




Posted By  -  Karan Gupta
 
Posted On  -  Wednesday, June 04, 2014

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250