Determining Checkbox Checked State via JavaScript / C# (ASP.NET)

I'm working on an ASPX page with C# codebehind. I have a checkbox that I want to use to show/hide toggle a div.

Below you'll see the code that I have right now, which WORKS but isn't exactly what I want.

The code I'm using just toggles the div, with no respect to the checkbox's checked state. This causes problems if the page posts back.

I want to be able to have a body onload event that checks the status of the checkbox and shows/hides the div accordingly (hide if UNchecked, show if checked).

I attempted doing this (currently from the checkbox onclick event, but I'd also like to use it in the body onload event):

function toggle_hide() {
            var div = document.getElementById('payment_address');

            if (document.getElementById("chkDifferentPmtAddress").checked == true)
                div.style.display = 'block';
            else
                div.style.display = 'none';
        }  

But I get an error "Object Required" on the "If" line in the above code.

This is what I currently have, which works, but doesn't take into account the checked status ...
// FROM THE CODEBEHIND:
protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);

        //Apply javascript to checkbox
        chkDifferentPmtAddress.Attributes.Add("onclick", "show_hide();");
}



// JAVASCRIPT IN HEADER OF THE PAGE

function show_hide() {
            var div = document.getElementById('payment_address');

            if(div.style.display == 'block')
              div.style.display = 'none';
            else
              div.style.display = 'block';
        }



// ASPX PAGE:

<asp:CheckBox ID="chkDifferentPmtAddress" runat="server" Text="Mail payments to a <strong>DIFFERENT address</strong>." />

<div id="payment_address" style="display:none;">
 <!-- Payment Address Info Goes Here -->
 <p>Whatever</p>
</div>

Open in new window

mandi224Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
Try :

( using of OnClientClick="show_hide();" )
<asp:CheckBox ID="chkDifferentPmtAddress" runat="server" OnClientClick="show_hide();" Text="Mail payments to a <strong>DIFFERENT address</strong>." />

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
leakim971PluritechnicianCommented:
And the Javascript code :


function show_hide() {
            var div = document.getElementById('payment_address');
            var checkbox = document.getElementById('<%= chkDifferentPmtAddress.ClientID %>');

            if(checkbox.checked)
              div.style.display = 'none';
            else
              div.style.display = 'block';
        }

Open in new window

prateekbahlCommented:
you need the OnClientClick to fire the show_hide() function.
mandi224Author Commented:
Visual Studio didn't like the "OnClientClick" event put directly into the checkbox control as you suggested and wouldn't build. However, I was able to add:

chkDifferentPmtAddress.Attributes.Add("onclick", "show_hide();");

to the OnInit event for the page and that worked perfectly along with the javascript snippet that you supplied!  Thanks!!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
.NET Programming

From novice to tech pro — start learning today.