How to use checkboxes in ASP.net from javascript

Question

4.00/5 (1 vote)

See more:

How can I access CheckBoxes in javascript functions in ASP.net?

Please help me.

Thanks in advance!

[Edit]OP did in fact mean javascript so I'm re-editing OP's question[/Edit]

OP's code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="tour2.aspx.cs" Inherits="tour2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1"  runat="server">
    <title>www.smartwaytours.com</title>
    <script type="text/javascript">          function pageLoad() {      }
    function imageload()    {
       document.getElementById("img1").src=document.getElementById("File1").value; 
       alert(document.getElementById("img1").src);
         document.getElementById("hidHeight").value = document.getElementById("img1").height;
         document.getElementById("hidWidth").value  = document.getElementById("img1").width;
         //document.getElementById("img1").style.display="none"
         var height=document.getElementById("hidHeight").value;
         var width=document.getElementById("hidWidth").value;
         alert(height);         alert(width);                
         if((height!="61")&&(width!="64"))         { 
            alert("Hi");
            //document.getElementById("img1").style.display="";
            document.getElementById("img1").src = "images/ni(64X61).gif"
            //document.getElementById("File1").value= "fasdf";
            alert("Please upload 64 X 61 size image");            
           document.getElementById("hidHeight").value= "";
            document.getElementById("hidWidth").value= "";
            alert("ashdgjf");                        return false;           
                     }         else{         
         document.getElementById("img1").src=document.getElementById("File1").value; 
         }                    return ;     }    function imageload1()    {
        
        document.getElementById("img2").src=document.getElementById("File2").value;
        document.getElementById("HiddenField3").value = document.getElementById("img2").height;
         document.getElementById("HiddenField4").value  = document.getElementById("img2").width;
    }    function imageload2()    {        
        document.getElementById("img3").src=document.getElementById("File3").value;
        document.getElementById("HiddenField5").value = document.getElementById("img3").height;
         document.getElementById("HiddenField6").value  = document.getElementById("img3").width;
    }        function chkImg()    {       
        document.getElementById("img3").style.display = "";
        document.getElementById("File3").style.display = "";        }        
                    </script>    <style type="text/css">            
         .style3       {       	width:60%;       }         .style4        {
            text-align: right;        }     </style></head>
</head><body>    <form id="form1"  runat="server">
    <div>
    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
                
    <table width="966" height="629" border="0" align="center" style="background-color:Aqua" cellpadding="5" cellspacing="5" id="Table_01">
      <tr>
		<td colspan="5" background="images/inside_01.jpg"> </td>
  </tr>	<tr>
		<td width="44" background="images/bg1.jpg"> </td>
		<td colspan="3">
			<img src="images/inside_03.jpg" width="876" height="171" alt=""><table 
                class="style2">                <br />
                <br />
                <asp:ScriptManager ID="ScriptManager1" runat="server">
                </asp:ScriptManager>                <br />
                <br />                <br />
                <tr>                
                    <td class="style4">
                        Tour Title</td>
                                <td class
Tour Title</td>                                <td class="style3" >
                                    <asp:TextBox ID="txttourtitle" runat="server" Width="190"></asp:TextBox>
                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
                    ControlToValidate="txttourtitle" ErrorMessage="*"></asp:RequiredFieldValidator>
                                </td>
                            </tr>                            <tr>
                                <td class="style4">
                                    Tour Description</td>
                                <td class="style3">
                                    <textarea id="txttourdesc" cols="20" name="S1" rows="4" class="style3"></textarea>
                                    
                                    </td>
                                                                </tr>
                            <tr>
                                <td class="style4">
                                    Image(64X61)</td>
                                <td>                
                <img  id="img1" src=""  runat="server" alt="" />
                <asp:HiddenField ID="hidWidth" runat="server" />
                <asp:HiddenField ID="hidHeight" runat="server" />
                <input  type="file" id="File1"  runat="server"   önchange="return imageload();" />
                <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" 
                   ErrorMessage="Upload Jpegs and Gifs only." 
ValidationExpression="^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))(.jpg|.JPG|.gif|.GIF)$" 
ControlToValidate="File1"></asp:RegularExpressionValidator>
            </td>                            </tr>
                            <tr>
                                <td class="style4">
                                    Image(398X225)</td>
                                <td>                
                <img  id="img2" src=""  runat="server" alt="" />
                 <asp:HiddenField ID="HiddenField1" runat="server" />
                <asp:HiddenField ID="HiddenField2" runat="server" />
                <input  type="file" id="File2"  runat="server"  önchange="imageload1();" /><asp:RegularExpressionValidator 
                    ID="RegularExpressionValidator2" runat="server" 
                    rrorMessage="Upload Jpegs and Gifs only." 
ValidationExpression="^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))(.jpg|.JPG|.gif|.GIF)$" 
ControlToValidate="File2"></asp:RegularExpressionValidator>
            </td>                            </tr>
                            <tr>
                                <td class="style4">
                                     </td>
                                <td>
         <asp:UpdatePanel ID="UpdatePanel1" runat="server">            <contenttemplate>
            <input type="checkbox" id="CheckBox1"  runat="server"  önclick="chkImg()" />
            <asp:Label ID="Label1" Text="For Popular Tour" runat="server"></asp:Label>
                                       </td>            
                                                  </tr>
                            <tr>            <td>
                <br />                 </td>
            <td>                
                <img  id="img3"  runat="server" alt="" style="display:none"/>
                 <asp:HiddenField ID="HiddenField5" runat="server" />
                <asp:HiddenField ID="HiddenField6" runat="server" />
                <input  type="file" id="File3"  runat="server"  önchange="imageload2();" style="display:none"/></td>
        </tr>        <tr>        </contenttemplate>

Posted 2-Mar-11 23:11pm

leelavathikuna

Updated 3-Mar-11 0:50am

Manfred Rudolf Bihy

v5

Add a Solution

Comments

Baji Jabbar 3-Mar-11 5:15am

What! Is it about dynamically adding check boxes

leelavathikuna 3-Mar-11 5:39am

no,
i am added one checkbox in the design feild.
and in below that i added one file upload control which is in the hidden feild.
if i can check that box that file upload will be displayed
but if i uncheck that box then the file upload control don't display in the form.but it was displaying how can i rectify this

Manfred Rudolf Bihy 3-Mar-11 6:52am

Please do not use comments to post code. Code belongs in question or answers. If your the one who posted the question the code most likely belongs there. I fixed that for you now, but please don't do it again.

Manfred Rudolf Bihy 3-Mar-11 7:13am

I've added a solution which should do what you needed. If you have issues with my solution please leave your comments there.

Manfred Rudolf Bihy 4-Mar-11 10:13am

You said that my solution worked for you. Why did you not accept it and also neither voted on it.

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

Ramalinga Koushik · Answer 1 · 2011-03-02T23:22:00

Solution 1

In aspx

<asp:CheckBox ID="CheckBox1"; runat="server" />

C#

if (CheckBox1.Checked)
{
 //your actions

}

Hope this might help you.

Posted 2-Mar-11 23:22pm

Ramalinga Koushik

Updated 2-Mar-11 23:24pm

v2

Baji Jabbar · Answer 2 · 2011-03-03T00:05:00

Solution 3

use Javascript to hide/show the control.

document.getElementById("").style.visibility="hidden";

Posted 3-Mar-11 0:05am

Baji Jabbar

Manfred Rudolf Bihy · Answer 3 · 2011-03-03T01:10:00

I you're doing this from javascript this should work:

// Edit this function in your javascript section
function chkImg(box)
{
    if(box.checked == true)
    {
        //if you want the image to be shown if the checkbox is checked the use
        // display="block" or display="inline" in the next line
        document.getElementById("img3").style.display = "none";
        document.getElementById("File3").style.visibility="hidden";
    }
}

Make this change to your checkbox in your HTML:

<input type="checkbox" id="CheckBox1" onclick="chkImg(this);" />

You had a funny character in the attribute name "onclick" and the Runat="server" attribute is not needed. Passing "this" to the chkImg function gives you immeadiate access to the checkbox without fetching it via document.getElementById for instance.

Cheers!