Post
Ask Question

Hide or Show CheckBox Using jQuery Toggle() Method

You can toggle between the hide() and show() methods with the toggle() method. Using the toggle method, the shown elements are hidden and the hidden elements are shown.
  1. Go to Start, then All Programs and open Microsoft Visual Studio 2013.

  2. Now, click on File, then select New Project and click on Visual C#. Then select ASP.NET Web Application, Empty and click on OK.

  3. Provide the web application a name and location as your wish. I named my web application ToggleCheckbox.

  4. Now the project will be opened. Right-click on the web application name, add a New Item and select Web Form. Then click on Add.

  5. Add the following code between the <form> tags of the WebForm1.aspx page.
  1. <div>  
  2.     <asp:Label ID="HideOrShow" runat="server" Text="Hide Checkboxes"></asp:Label><br />  
  3.     <asp:CheckBox ID="CheckBox1" runat="server" class="HideorShow" Text="AAA" /><br />  
  4.     <asp:CheckBox ID="CheckBox2" runat="server" class="HideorShow" Text="BBB" /><br />  
  5.     <asp:CheckBox ID="CheckBox3" runat="server" class="HideorShow" Text="CCC" /><br />  
  6.     <asp:CheckBox ID="CheckBox4" runat="server" class="HideorShow" Text="DDD" /><br />  
  7.     <asp:CheckBox ID="CheckBox5" runat="server" class="HideorShow" Text="EEE" /><br />  
  8. </div>  
6. Add a <script> tag between the <head> tags of the WebForm1.aspx page. You need to provide a reference for jQuery as in the following.
  1. <head runat="server">  
  2.    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
  3. </head>  
7. Add another <script> tag between the <head> tags and write the following code for it.
  1. <script type="text/javascript">  
  2.     $(document).ready(function () {  
  3.         $('#HideOrShow').toggle(  
  4.         function () {  
  5.             $('.HideorShow').hide();  
  6.             $('#HideOrShow').text('Show Checkboxes');  
  7.         },  
  8.         function () {  
  9.             $('.HideorShow').show();  
  10.             $('#HideOrShow').text('Hide Checkboxes');  
  11.         });  
  12.     });  
  13. </script>  
8. Now run the application and you can see it in your browser.
 
  
9. Now click on Hide Checkboxes.
 
 
 
10. Now click on Show Checkboxes.
 


Similar Articles