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, Apr 23 '15 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, Apr 23 '15 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, Apr 23 '15 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 http://stackoverflow.com/questions/5792290/input-name-and-id-changes-when-set-runat-server — Sam, Apr 23 '15 at 19:04
Kindly find part of my code reflecting my challenge in the edited post. @Sam I discovered that in the course of googling but if I set the `runat="server"` the javascript function wouldn't fire. Definitely there has to be another way. — Kacey Ezerioha, Apr 23 '15 at 19:13
to read the input values in codebehind you needs to put the runat="server" attribute in the inputs. — lem2802, Apr 23 '15 at 19:19
@KaceyEzerioha i don't see a problem with the solution of (Win) you could change your checkbox to asp:chackbox and in JavaScript call your checkbox using ClientID like this: document.getElementById('<%= chkIsPrivate.ClientID %>') it should work. please refer this link http://stackoverflow.com/questions/21133519/how-to-get-value-of-selected-checkboxlist-items-using-javascript-in-asp-net — Sam, Apr 23 '15 at 20:25

Win · Answer 1 · 2015-04-23T19:39:36.070

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>

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, Apr 23 '15 at 19:24
Thanks for your help @Win But the javascript didn't work after doing it exactly the way you recommeded. Any other ideas? — Kacey Ezerioha, Apr 23 '15 at 20:21
Did yo see any script error? You can download my tested code [here](http://pastebin.com/rkeLnWCh). You want to create a new aspx page without master page and debug it. — Win, Apr 23 '15 at 21:00

score 1 · Accepted Answer · answered Apr 24 '15 at 06:43

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.

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

2 Answers2

Auto Postback when a checkbox is checked/unchecked

Postback by button click

Back to Original Question