Articles → JQUERY → Check All Checkboxes In Tree View Using Jquery

Check All Checkboxes In Tree View Using Jquery

The objective of this tutorial is to demonstrate how to check and uncheck all checkboxes in tree view using jquery

Prerequisite

Software

Before you start reading this tutorial you should make sure that

Visual studio 2005 (or above) is installed on your machine.
Latest jQuery file i.e. jquery-latest.js (from the path http://code.jquery.com/jquery-latest.js) is downloaded on your system.

Technical knowledge

Before you go ahead, it is required that you should know

How to create a website (web project) in asp.net?
What are asp.net server controls (specially checkbox and treeview)?
How to bind data in treeview?
What is the purpose of ready method in JQuery?
How to add events to HTML elements in jQuery?

Steps Involved

In order to achieve our goal we will follow these steps

Create a website and add tree view control on the page
Add checkbox on the page.
Add jquery to check and uncheck checkboxes.
Output

Step 1. Create A Website And Add Tree View Control On The Page

First of all create a new website(or web based application) and in the page add a treeview control

<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>

If you have a look at the code given above, you will see that each node has ‘ShowCheckBox’ property set to ‘true’ which indicates that these nodes will display a check box in Tree view control.

Step 2. Add Checkbox On The Page

This checkbox allows the user to switch between true and false state. When user checks this checkbox all the checkbox in the treeview gets checked similarly all boxes are unchecked when user unchecked it.

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

If we now look at the rendered HTML you will see a main div and inside it we have 3 tables (equal to the number of nodes in tree view)

<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

Execute the program

Picture showing the output of check all checkboxes in tree view using jquery

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Wednesday, June 4, 2014

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**