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
