Checking if a checkbox is checked with Javascript

Question

I have been trying to check if a checkbox is checked for awhile. For some reason it is not working correctly it just always says nothing is selected.

Function

    if(document.theform.hail.Checked==true && document.theform.wind.Checked==false && document.theform.tornado.Checked==false){
        alert("Hail Checked");
}else{
        alert("Nothing Selected");
    }

Form

<form name="theform" action="<?php echo $PHP_SELF; ?>" method="post">
      <div class="date">
        From: <script type="text/javascript">DateInput('orderdate', true, 'YYMMDD')</script>  To:<script type="text/javascript">DateInput('orderdatetwo', true, 'YYMMDD')</script>
      </div>
      <div class="checkBoxes">
        <input id="hail" name="hail" type="checkbox" value="hail">Hail<br />
        <input id="wind" name="wind" type="checkbox" value="wind">Wind<br />
        <input id="tornado" name="tornado" type="checkbox" value="tornado">Tornado<br />
        <input name="submit" type="submit" value="View Data" onClick="document.theform.action='<?php echo $PHP_SELF; ?>';">
        <input name="submit" type="button" value="Create KML" onClick="generatorChoice();">

You say that wind and hail has to be checked... is this correct? — Zoidberg
– Zoidberg, Commented Mar 3, 2011 at 3:18

Matt Ball · Accepted Answer · 2013-04-07 03:43:19Z

8

The property should be in lowercase.

var theform = document.theform;
if(theform.hail.checked && !theform.wind.checked && !theform.tornado.checked) {
    alert("Hail Checked");
} else {
    alert("Nothing Selected");
}

Also, as the above code shows:

No need to check explicitly against true or false
Store a reference to theform for better performance

edited Apr 7, 2013 at 3:43

answered Mar 3, 2011 at 3:18

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

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

8 Comments

shinjuo Over a year ago

What do you mean by store a reference to theform?

Matt Ball Over a year ago

@shinjuo: the first line of code in my answer, var theform = document.theform;

shinjuo Over a year ago

Sorry it has been a long day. Thanks for the help

Delan Azabani Over a year ago

Also, the message being Hail checked is misleading as the if tests for Hail checked ONLY.

Matt Ball Over a year ago

@shinjuo: long day makes for sloppy, frustating mistakes. I've been there. Go get some shut-eye, you'll write better code in the morning.

|

Andrew Marshall · Accepted Answer · 2011-03-03 03:22:16Z

3

if(document.getElementById("hail").checked && !document.getElementById("wind").checked && !document.getElementById("tornado").checked) {
    alert("Hail Checked");
} else {
    alert("Nothing Selected");
}

answered Mar 3, 2011 at 3:22

Andrew Marshall

97.3k20 gold badges228 silver badges217 bronze badges

2 Comments

Zoidberg Over a year ago

I like the use of getElementById much better. Cleaner, and much less to chance with old old browsers, AHEM IE... AHEM...

Andrew Marshall Over a year ago

Personally I'd never think of doing it the other way. Then again I'd also almost never not be using jQuery anyway…

cHao · Accepted Answer · 2011-03-03 03:20:29Z

2

In Javascript, the property's called checked, not Checked.

answered Mar 3, 2011 at 3:20

cHao

87k21 gold badges147 silver badges178 bronze badges

Collectives™ on Stack Overflow

Checking if a checkbox is checked with Javascript

3 Answers 3

8 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related