How to Hide CheckBox Using jQuery

Upendra Pratap Shahi
Aug 15, 2015
138.8k
0
5
Article

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

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

<div>
<asp:Label ID="lblForHide" CssClass="LableText" runat="server" Text="Click me for see checkboxed hide"></asp:Label>
<br />
<asp:Label ID="lblForshow" CssClass="LableText" runat="server" Text="Click me for see checkboxed hide"></asp:Label>
<br />
<asp:CheckBox ID="CheckBox1" runat="server" class="hide" Text="Upendra" />
<br />
<asp:CheckBox ID="CheckBox2" runat="server" class="hide" Text="Ashish" />
<br />
<asp:CheckBox ID="CheckBox3" runat="server" class="hide" Text="Gitendra" />
<br />
<asp:CheckBox ID="CheckBox4" runat="server" class="hide" Text="Amit" />
<br />
<asp:CheckBox ID="CheckBox5" runat="server" class="hide" Text="Sheelu" />
<br />
</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:

< script type = "text/javascript" > $(document).ready(function() {
$('#lblForshow').hide();
$('#lblForHide').click(function() {
$('.hide').hide();
$('#lblForHide').hide();
$('#lblForshow').show();
});
$('#lblForshow').click(function() {
$('#lblForHide').show();
$('.hide').show();
$('#lblForshow').hide();
});
}); < /script>

Now your page looks as in the following.

hidecheckboxonlable.aspx.cs

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="hidecheckboxonlable.aspx.cs" Inherits="hidecheckboxonlable" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>C-Sharpcorner articles</title>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#lblForshow').hide();
$('#lblForHide').click(function () {
$('.hide').hide();
$('#lblForHide').hide();
$('#lblForshow').show();
});
$('#lblForshow').click(function () {
$('#lblForHide').show();
$('.hide').show();
$('#lblForshow').hide();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="lblForHide" CssClass="LableText" runat="server" Text="Click me for see checkboxed hide"></asp:Label>
<br />
<asp:Label ID="lblForshow" CssClass="LableText" runat="server" Text="Click me for see checkboxed hide"></asp:Label>
<br />
<asp:CheckBox ID="CheckBox1" runat="server" class="hide" Text="Upendra" />
<br />
<asp:CheckBox ID="CheckBox2" runat="server" class="hide" Text="Ashish" />
<br />
<asp:CheckBox ID="CheckBox3" runat="server" class="hide" Text="Gitendra" />
<br />
<asp:CheckBox ID="CheckBox4" runat="server" class="hide" Text="Amit" />
<br />
<asp:CheckBox ID="CheckBox5" runat="server" class="hide" Text="Sheelu" />
<br />
</div>
</form>
</body>
</html>