How to get checked value of HTML Input Checkbox in Code Behind

Question

I am using a html input checkbox control in a modalpopup which runs a javascript function in the onclick event. Now my challenge is getting the value of the checked property of this control from code-behind to do some behavioral stuff. When I added the runat="server" property to it and wrote chkIsPrivate.Attributes.Add("onclick", "toggleCheckbox()"); in the page_load, the javascript function would not fire.

I have searched online for a solution but didn't get any. I'm hoping someone will help me out here.

Please note that without the runat="server" and the line of code in page_load, the javascript function fires when the checkbox control is clicked. But I need to get the value of the checked property in the code-behind.

HTML:

<tr>
      <td align="right">Private Campaign:</td>
      <td align="left">
             <input id="chkIsPrivate" type="checkbox" onclick="toggleCheckbox()" />
      </td>
</tr>

<tr id="password_tr" style="display: none">
      <td align="right">Password:</td>
      <td align="left">
           <asp:TextBox  ID="txtPassword" runat="server" TextMode="Password" Width="150px"></asp:TextBox><br />
      </td>
</tr>

<tr id="confirmPassword_tr" style="display: none">
      <td align="right">Confirm Password:</td>
      <td align="left">
        <asp:TextBox ID="txtConfirmPassword" runat="server" TextMode="Password" Width="150px"></asp:TextBox>
      </td>
</tr>

JavaScript:

function toggleCheckbox() {
                var checkBox = document.getElementById("chkIsPrivate");
                var pwd = document.getElementById("password_tr");
                var confirmPwd = document.getElementById("confirmPassword_tr");
                var hiddenVal = document.getElementById("privateHiddenInput");
                if (checkBox.checked) {
                    pwd.style.display = "table-row";
                    confirmPwd.style.display = "table-row"; 

                }
                else {
                    pwd.style.display = "none";
                    confirmPwd.style.display = "none";
                }
            }

google is your best friend if used properly.. please show some more effort on your part and do a simple google search..come on now...! — MethodMan
– MethodMan, Commented Apr 23, 2015 at 18:35
trust me when I tell you that I've been googling for the past 3 hours on this issue but didn't find solution to my problem. It's really embarrassing. As you see in my post, I did a trial there but it just got my javascript function not working. Also tried Request.Form["checkbox1"] but that didn't work either. — Kacey Ezerioha
– Kacey Ezerioha, Commented Apr 23, 2015 at 18:48
I don't see any relevant code.. so @KaceyEzerioha sorry I can't agree with you in regards to when you say As you can see in my post please read / review how to ask a question on stackoverflow. — MethodMan
– MethodMan, Commented Apr 23, 2015 at 18:55
are you using master page? the input name and id changes when you set runat=server maybe when you call your input in javascript it doesn't recognize the Id please refer this link stackoverflow.com/questions/5792290/… — Sam
– Sam, Commented Apr 23, 2015 at 19:04
to read the input values in codebehind you needs to put the runat="server" attribute in the inputs. — lem2802
– lem2802, Commented Apr 23, 2015 at 19:19

Win · Accepted Answer · 2015-04-23 19:39:36Z

1

Normally, if you want to retrieve checkbox's value in code behind, you want to use ASP.Net CheckBox Sever control unless you have a valid reason not to use it.

ASP.Net Server Controls are meant for that kind of purpose.

Auto Postback when a checkbox is checked/unchecked

<asp:CheckBox ID="AutoPostbackCheckbox" runat="server" AutoPostBack="True" 
    OnCheckedChanged="AutoPostbackCheckbox_CheckedChanged" />

// Code Behind
protected void AutoPostbackCheckbox_CheckedChanged(object sender, EventArgs e)
{
    bool value = AutoPostbackCheckbox.Checked;
}

Postback by button click

<asp:CheckBox ID="Checkbox2" runat="server" />
<asp:Button ID="SubmitButton" OnClick="SubmitButton_Click" 
    runat="server" Text="Submit" />

// Code Behind
protected void SubmitButton_Click(object sender, EventArgs e)
{
    bool value = Checkbox2.Checked;
}

Back to Original Question

I found few issues in your updated code. You can use server control.

Look at 5 <--- in the following code.

<asp:CheckBox ID="IsPrivateCheckBox" runat="server" 
   onclick="toggleCheckbox(this)" /> <--- Pass this argument

<script type="text/javascript">
    function toggleCheckbox(checkBox) { <--- add checkBox parameter
        //var checkBox = document.getElementById("chkIsPrivate"); <-- Do not need it
        var pwd = document.getElementById("password_tr");
        var confirmPwd = document.getElementById("confirmPassword_tr");
        if (checkBox.checked) {
            pwd.style.display = "block"; <--- Make sure this is block
            confirmPwd.style.display = "block"; <--- Make sure this is block
        }
        else {
            pwd.style.display = "none";
            confirmPwd.style.display = "none";
        }
    }
</script>

edited Apr 23, 2015 at 19:39

answered Apr 23, 2015 at 19:08

Win

62.4k13 gold badges106 silver badges190 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kacey Ezerioha Over a year ago

Thanks @Win But I can't use checkbox server control because of the operation on the client I am doing with javascript. That's why I can't use the server control.

Kacey Ezerioha Over a year ago

Thanks for your help @Win But the javascript didn't work after doing it exactly the way you recommeded. Any other ideas?

Win Over a year ago

Did yo see any script error? You can download my tested code here. You want to create a new aspx page without master page and debug it.

Kacey Ezerioha · Accepted Answer · 2015-04-24 06:43:12Z

1

Thanks all of you guys for coming out to assist me. But I found a way around it to get it working.

What I did was to;

add a hiddenfield: asp:HiddenField ID="hiddenField" runat="server" />
create a property to retrieve and set the value of the hiddenfield
and added this to my javascript function to add 'true' or 'false' to the hidden field by saying this: document.getElementById('<%=hdfIsPrivate.ClientID %>').value = 'true'; if the html input checkbox is checked.

This worked nicely as I was able to access the value of the hiddenfield from code behind and the javascript works when checkbox is clicked.

answered Apr 24, 2015 at 6:43

Kacey Ezerioha

1,2286 gold badges26 silver badges49 bronze badges

Collectives™ on Stack Overflow

How to get checked value of HTML Input Checkbox in Code Behind

2 Answers 2

Auto Postback when a checkbox is checked/unchecked

Postback by button click

Back to Original Question

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Auto Postback when a checkbox is checked/unchecked

Postback by button click

Back to Original Question

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest