Post
Ask Question

How to Hide CheckBox Using jQuery

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


Similar Articles