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