Checkbox in ASP.NET

Deepak Ratan

11y1.3k.NET

I am new to javascript and I have a basic question for a simple task. I am trying to show or hide checkbox when the label is clicked

I am having five Checkbox

How to write a Javascript when Label is clicked five checkbox should display?

Help

21 Replies

Know the answer? Post it — somebody with the same question will find it here.

Govinda Rajulu Yemineni11y ago
Hi Deepak,

try this

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">script>
<script type="text/javascript">
   $(document).ready(function () {
         $('#HideOrShow').toggle(
               function () {
                        $('.HideorShow').hide();
                        $('#HideOrShow').text('Show Checkboxes');
               },
               function () {
                        $('.HideorShow').show();
                        $('#HideOrShow').text('Hide Checkboxes');
         });
});
script>

<form id="form1" runat="server">
<div>
<asp:Label ID="HideOrShow" runat="server" Text="Hide Checkboxes">asp:Label><br />
<asp:CheckBox ID="CheckBox1" runat="server" class="HideorShow" Text="AAA" /><br />
<asp:CheckBox ID="CheckBox2" runat="server" class="HideorShow" Text="BBB" /><br />
<asp:CheckBox ID="CheckBox3" runat="server" class="HideorShow" Text="CCC" /><br />
<asp:CheckBox ID="CheckBox4" runat="server" class="HideorShow" Text="DDD" /><br />
<asp:CheckBox ID="CheckBox5" runat="server" class="HideorShow" Text="EEE" /><br />
div>
form>
Sumit Joshi11y ago
HI Upendra Pratap Shahi

We all are community Friends and Friend never minds.

Have a happy Day Upendra Pratap Shahi
Upendra Pratap Shahi11y ago
Hello Sumit Joshi,

Don't take it personally. It is a need for us to clarify self before suggest other .

Enjoy coding.

Sumit Joshi11y ago

Put Javascript in tag inside

Javascript

var Toss = document.getElementById('cell');

Toss.addEventListener('click', function() {

 var divElem = document.getElementById('divPhone');

 if( this.checked){

     divElem.style.display = 'block' ; }

else{divElem.style.display = 'none' ; } });

HTML

  for="cell">3. Do you currently have a cell phone? (Y/N)

  type="checkbox" name="cell" id="cell" data-on="Yes" data-off="No" />

  id="divPhone" class="hidden">

 for="blackBerry">4.If YES, is the cell phone a BlackBerry?             (Y/N)

 type="checkbox" name="blackBerry" id= "blackBerry" data-on="Yes" data-off="No" />

.hidden  {     display: none; }

Upendra Pratap Shahi11y ago

Hello Sumit Joshi

If you have copy then try to modifying this then post. Link may be seems as you because any one can find this from google but code may vary then try to modifying this with own logic or example.

Once I've copy a code of Gopi Chand sir when I was beginner here but now days never be happend this.

Sumit Joshi11y ago

Hi Upendra Pratap Shahi same you have done lot of time with me..... let it be

Sumit Joshi11y ago

Hi Upendra same you have done lot of time with me..... let it be

Upendra Pratap Shahi11y ago

Dear Sumit Joshi, It seems as like you have copy my code and paste here .

This is not good dear.

Try to give your own suggestion.

Hello Deepak Ratan, Kindly look forward to your solution given by me.

Thanks Sumit Joshi to copying my code.

Sumit Joshi11y ago

HI Deepak

Below is the code that can solve your problem

<%@ Page Language="C#" AutoEventWireup="true"CodeFile="hidecheckboxonlable.aspx.cs" Inherits="hidecheckboxonlable" %>

DOCTYPE html>

<html>

<title>title>

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

<div>

<asp:Label ID="lblForHide" runat="server" Text="Click me for see checkboxed hide">asp:Label><br />

<asp:CheckBox ID="CheckBox1" runat="server" class="hide" Text="AAA" /><br />

<asp:CheckBox ID="CheckBox2" runat="server" class="hide" Text="BBB" /><br />

<asp:CheckBox ID="CheckBox3" runat="server" class="hide" Text="CCC" /><br />

<asp:CheckBox ID="CheckBox4" runat="server" class="hide" Text="DDD" /><br />

<asp:CheckBox ID="CheckBox5" runat="server" class="hide" Text="EEE" /><br />

<asp:Label ID="lblForshow" runat="server" Text="Click me for see checkboxed hide">asp:Label><br />

div>

form>

body>

html>

If it is helpful for you Accept as answer

Upendra Pratap Shahi11y ago

Is this worked for you or not?

Rahul Prajapat11y ago

hello deepak try this

Upendra Pratap Shahi11y ago

Hello,

Use below code-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="hidecheckboxonlable.aspx.cs" Inherits="hidecheckboxonlable" %>

DOCTYPE html>

<html>

<title>title>

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

<div>

<asp:Label ID="lblForHide" runat="server" Text="Click me for see checkboxed hide">asp:Label><br />

<asp:CheckBox ID="CheckBox1" runat="server" class="hide" Text="AAA" /><br />

<asp:CheckBox ID="CheckBox2" runat="server" class="hide" Text="BBB" /><br />

<asp:CheckBox ID="CheckBox3" runat="server" class="hide" Text="CCC" /><br />

<asp:CheckBox ID="CheckBox4" runat="server" class="hide" Text="DDD" /><br />

<asp:CheckBox ID="CheckBox5" runat="server" class="hide" Text="EEE" /><br />

<asp:Label ID="lblForshow" runat="server" Text="Click me for see checkboxed hide">asp:Label><br />

div>

form>

body>

html>

Munesh Sharma11y ago

Raja T11y ago

Are you included jquery libery...?

if you not inlcude it is not work..Please check.

In my code i have download save to my local, thats why i am using below script like

you dnt have jquer just declare like