This article shows how to hide a checkbox on a label click using jQuery. Here I've described the jQuery method like hide() and show() and how to find the Id of the controls.

INITIAL CHAMBER

Step 1

Open your Visual Studio and create an empty website, provide a suitable name such as HideCheckboxOnLable.

Step 2

In Solution Explorer you get your empty website, then add web forms.

For Web Form

HideCheckboxOnLable (your empty website). Right-click and select Add New Item -> Web Form. Name it hidecheckboxonlable.aspx.

DESIGN CHAMBER

Step 3

Open the hidecheckboxonlable.aspx file and write some code for the design of the application.

First add a jQuery plugin to your head section. Here I have used the jquery-2.1.4.min.js plugin for demonstration purposes.

How to add in your page

  1. <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
Add a control to your page and your page will look as in the following-
  1. <div>
  2. <asp:Label ID="lblForHide" CssClass="LableText" runat="server" Text="Click me for see checkboxed hide"></asp:Label>
  3. <br />
  4. <asp:Label ID="lblForshow" CssClass="LableText" runat="server" Text="Click me for see checkboxed hide"></asp:Label>
  5. <br />
  6. <asp:CheckBox ID="CheckBox1" runat="server" class="hide" Text="Upendra" />
  7. <br />
  8. <asp:CheckBox ID="CheckBox2" runat="server" class="hide" Text="Ashish" />
  9. <br />
  10. <asp:CheckBox ID="CheckBox3" runat="server" class="hide" Text="Gitendra" />
  11. <br />
  12. <asp:CheckBox ID="CheckBox4" runat="server" class="hide" Text="Amit" />
  13. <br />
  14. <asp:CheckBox ID="CheckBox5" runat="server" class="hide" Text="Sheelu" />
  15. <br />
  16. </div>
Now the design looks as in:



Now write some script for jQuery for our purposes.

Here we write to show and hide the jQuery code to execute the purpose:
  1. < script type = "text/javascript" > $(document).ready(function() {
  2. $('#lblForshow').hide();
  3. $('#lblForHide').click(function() {
  4. $('.hide').hide();
  5. $('#lblForHide').hide();
  6. $('#lblForshow').show();
  7. });
  8. $('#lblForshow').click(function() {
  9. $('#lblForHide').show();
  10. $('.hide').show();
  11. $('#lblForshow').hide();
  12. });
  13. }); < /script>
Now your page looks as in the following.

hidecheckboxonlable.aspx.cs
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="hidecheckboxonlable.aspx.cs" Inherits="hidecheckboxonlable" %>
  2. <!DOCTYPE html>
  3. <html>
  4. <head id="Head1" runat="server">
  5. <title>C-Sharpcorner articles</title>
  6. <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function () {
  9. $('#lblForshow').hide();
  10. $('#lblForHide').click(function () {
  11. $('.hide').hide();
  12. $('#lblForHide').hide();
  13. $('#lblForshow').show();
  14. });
  15. $('#lblForshow').click(function () {
  16. $('#lblForHide').show();
  17. $('.hide').show();
  18. $('#lblForshow').hide();
  19. });
  20. });
  21. </script>
  22. </head>
  23. <body>
  24. <form id="form1" runat="server">
  25. <div>
  26. <asp:Label ID="lblForHide" CssClass="LableText" runat="server" Text="Click me for see checkboxed hide"></asp:Label>
  27. <br />
  28. <asp:Label ID="lblForshow" CssClass="LableText" runat="server" Text="Click me for see checkboxed hide"></asp:Label>
  29. <br />
  30. <asp:CheckBox ID="CheckBox1" runat="server" class="hide" Text="Upendra" />
  31. <br />
  32. <asp:CheckBox ID="CheckBox2" runat="server" class="hide" Text="Ashish" />
  33. <br />
  34. <asp:CheckBox ID="CheckBox3" runat="server" class="hide" Text="Gitendra" />
  35. <br />
  36. <asp:CheckBox ID="CheckBox4" runat="server" class="hide" Text="Amit" />
  37. <br />
  38. <asp:CheckBox ID="CheckBox5" runat="server" class="hide" Text="Sheelu" />
  39. <br />
  40. </div>
  41. </form>
  42. </body>
  43. </html>
On code behind page

No need to write here something because I've put everyting from the front end.
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  8. public partial class hidecheckboxonlable: System.Web.UI.Page
  9. {
  10. protected void Page_Load(object sender, EventArgs e) {}
  11. }
Output

When load on default



Load after label click



After re click on this



I hope you liked this. Have a good day. Thank you for reading.