How to show a checkbox on check and hide on uncheck

Question

0.00/5 (No votes)

See more:

I have a asp gridview and inside grid view i am populating checkboxes.

My requirement is that, Initially the check boxes are hidden and on click it should be visible and checked.
Following is my code.

ASP.NET

<asp:GridView runat="server" ID="gvOifList" RowStyle-CssClass="rowHover" CssClass="gridviewdiv" OnRowCreated="OnRowCreated" AutoGenerateColumns="false" OnRowCommand="lnkWebURL_Click" OnRowDataBound="gvOifList_RowDataBound" GridLines="None" AlternatingRowStyle-BackColor="#D8D8D8" ShowHeader="false">
<asp:TemplateField>
<itemtemplate>
                                  
<asp:Checkbox ID="chbCopy" runat="server"  UseSubmitBehavior="false" Style="" CausesValidation="false"  />
</itemtemplate>

I am doing this development for iOS.

Posted 28-Aug-14 0:59am

Member 10284541

Updated 28-Aug-14 3:51am

Herman<T>.Instance

v2

Add a Solution

Comments

[no name] 28-Aug-14 7:10am

If the checkbox is hidden, how would you expect someone to see it to be able to check it to make it visible?

Member 10284541 28-Aug-14 8:08am

User know the place where to click...
If user click on that particular place the check box should be visible.

[no name] 28-Aug-14 8:52am

It's hidden. You need to find an alternate way or come up with some reasonable requirement.

ZurdoDev 28-Aug-14 7:39am

1. Reply to comment so that the user is notified instead of adding a new comment to your own question.
2. You'll want to use javascript to do it.

Member 10284541 28-Aug-14 8:20am

Can you please guide me the way to do it using java script.

ZurdoDev 28-Aug-14 8:21am

There are tons of examples online. In fact, if you use jquery just do $("#elementid").show();.

Member 10284541 28-Aug-14 8:44am

CAn you able to tap on a hidden check box?

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

H4F · Answer 1 · 2014-08-28T04:51:00

easy....
add me on facebook fb.me/Dean.Vangreunen

on the asp subscribe to the mouse click event

C#

// CheckBox name is "CB"

OnMouse_click(Object sender, MouseEventArgs e)
{
if( CB.Location.X >= e.X && CB.Location.Y >= e.Y && CB.Location.X+CB.Width <= e.X && CB.Location.Y+CB.Height <= e.Y)
{
//if the mouse is over the checkbox make it visable and check it
CB.visable = true;
CB.enabled = true;
CB.checked = true;
}
}

//on the checkbox sub scribe to the on checked changed event
OnCheckChange_click(Object sender, EventArgs e)
{
if(CB.checked == true)
{
CB.visable = false;
}
}

ignore this below lol

 __________ 
|\/\/\/\/\/|
| \/\/\/\/ |
|  \/\/\/  |
|   \/\/   |
|    \/    |
|    /\    |
|   /\/\   |
|  /\/\/\  |
| /\/\/\/\ |
|/\/\/\/\/\|
 ''''''''''

Dennis E White · Answer 2 · 2014-08-28T05:20:00

wrap your checkbox inside of a div kind of like the following:

HTML

<div id="divCheckBox">
    <input type="checkbox" id="chbCopy" name="vehicle" style="visibility: hidden;">
</input></div>

you will want to use the visibility style otherwise there won't be any space on the screen for the user to click into and when you display the checkbox (after being hidden) you will get the screen to shift on you. Since you are doing this for an iOS device that small shift could be a huge UX issue.

in your client side javascript code try the following: (assume you are using jQuery)

JavaScript

$("#divCheckBox").click(function() {
    if ("hidden" == $("#chbCopy").css("visibility")) {
        $("#chbCopy").css("visibility", "");
        $("#chbCopy").prop("checked", true);
    } 
});

To save yourself all the DOM searches you will of course want to save the checkbox element to a var but this was just to demo all that is happening.

How to show a checkbox on check and hide on uncheck

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0