JavaScript & DOM : Telling if a checkbox has been checked?

Question

Ive never written anything in javascript before, and I am having some difficulties figuring the DOM out. What I want to do is have a form with checkboxes, when a user hits a submit button, whatever checkboxes were selected will display a different table. Right now Im having trouble telling if a checkbox is checked. I havent really found any tutorials out there to describe this well. In a nutshell this is what I have.


function GetResults(form) {
var d = document;
d.write("");
if( form.box["1"].checked ){ // what goes here?
d.write("hi
");
}
d.write("");
}

Any suggestions would be helpful, I'm sure I am doing many things wrong.

I havent tried that yet, but is it possible to identify a checkbox by its value.

So if I have checkboxes with the values 'val1', 'val2', 'val3'....

How can I say -
if( val2 is checked )
// do this

I would rather have some way to identify them this way, rather than deal with arbitrary array indexes.

Also, is it possible to get a browser to display javascript error messages? Because Im sure there are errors on some lines, but my browser just stops executing when it hits one of these lines.

Alright doing what rkno suggested works to an extent.

Works:
if(document.myform.box1.checked){
document.write("1checked
");
} else {
document.write("1notchecked
");
}

Works:
if(true)
document.write("1
");
if(true)
document.write("2
");

Doesnt Work
if(document.myform.box1.checked){
document.write("1checked
");
} else {
document.write("1notchecked
");
}
if(document.myform.box2.checked){
document.write("2checked
");
} else {
document.write("2notchecked
");
}

It will only print the message for the first box, not the second one. Any ideas?

Answer 1

When using forms, make sure the objects (checkboxes, buttons, and even the form itself) in the form have unique names. In your example both checkboxes have the same name. If you like you can name them box1 and box2, then in the JavaScript referring to a particular refer to the appropriate name. If I that easier to understand than referring to them by object number. Consider the following HTML:

Answer 2

A better way would be:

function GetResults()
{
var inputElements = document.getElementsByTagName( "input" );
for(var i=0; i {
if( inputElements[i].type. toLowerString() == "checkbox" )
{
if( inputElements[i].checked )
{
//do something
}
}
}
}

Of course, that function assumes all of the checkboxes on your page are the ones you want to compare inside your form - if that's not the case, just modify the logic a bit to verify they are contained within your form. But, it will execute the innermost block for every checkbox element that is checked.

Edit: Also, avoid using document.formname.control - that is bad practice, and it is only supported in browsers so that older sites will still work. Correct practice is to call the element by id or tagname (document.getElementById or document.getElementsByTagName)

Answer 3

Rex answered the first part pretty well

as to debugging , I use firefox 2, with firebug. I can see the resultant html after any changes I make. insert breakpoints and do just about any debugging I need.

IE is a joke for debugging!

I use a library called jQuery, getting the checked input with a name is 1 line of code. jQuery does all the dirty dom walking for you!

Answer 4

Have your onclick() function check if the box is checked or not.