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.
- Go to Start, then All Programs and open Microsoft Visual Studio 2013.
- Now, click on File, then select New Project and click on Visual C#. Then select ASP.NET Web Application, Empty and click on OK.
- Provide the web application a name and location as your wish. I named my web application ToggleCheckbox.
- 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.
- Add the following code between the <form> tags of the WebForm1.aspx page.
- <div>
- <asp:Label ID="HideOrShow" runat="server" Text="Hide Checkboxes"></asp:Label><br />
- <asp:CheckBox ID="CheckBox1" runat="server" class="HideorShow" Text="AAA" /><br />
- <asp:CheckBox ID="CheckBox2" runat="server" class="HideorShow" Text="BBB" /><br />
- <asp:CheckBox ID="CheckBox3" runat="server" class="HideorShow" Text="CCC" /><br />
- <asp:CheckBox ID="CheckBox4" runat="server" class="HideorShow" Text="DDD" /><br />
- <asp:CheckBox ID="CheckBox5" runat="server" class="HideorShow" Text="EEE" /><br />
- </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.
- <head runat="server">
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
- </head>
7. Add another <script> tag between the <head> tags and write the following code for it.
- <script type="text/javascript">
- $(document).ready(function () {
- $('#HideOrShow').toggle(
- function () {
- $('.HideorShow').hide();
- $('#HideOrShow').text('Show Checkboxes');
- },
- function () {
- $('.HideorShow').show();
- $('#HideOrShow').text('Hide Checkboxes');
- });
- });
- </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.
![]()