This simple code checks if there is at lease one check box marked,
When I try to get check box array with Firefox I don't- I just the first one,
Same code working fine in IE,
Do I need to make different ID's for the check box elements and iterate them?
Thanks for your help.
<html>
<head>
<script type="text/javascript">
function testCheckBox(){
var vehicle = document.getElementById('vehicle');
for (var i=0; i < vehicle.length; i++){
alert(vehicle[i].checked);
if (trucks[i].checked){
alert('at least one was selected');
return true;
}
}
alert('Please select one');
return false;
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
<br />
<input type="button" name="test" value="test" onclick="testCheckBox();" />
</body>
</html>
This simple code checks if there is at lease one check box marked,
When I try to get check box array with Firefox I don't- I just the first one,
Same code working fine in IE,
Do I need to make different ID's for the check box elements and iterate them?
Thanks for your help.
<html>
<head>
<script type="text/javascript">
function testCheckBox(){
var vehicle = document.getElementById('vehicle');
for (var i=0; i < vehicle.length; i++){
alert(vehicle[i].checked);
if (trucks[i].checked){
alert('at least one was selected');
return true;
}
}
alert('Please select one');
return false;
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
<br />
<input type="button" name="test" value="test" onclick="testCheckBox();" />
</body>
</html>
4 Answers
Reset to default 3getElementById() never returns an array. It only returns a single element (because ids must be unique - i.e. having more than one element with the same id is invalid HTML.) getElementsByTagName() is what you want here:
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
var el = inputs[i];
if (el.type == 'checkbox' && el.checked) {
alert(el.value + ' is checked');
}
}
(Note: newer browsers support getElementsByClassName, which could also be used.
The problem is that you don't have any element with that id in your HTML. That's a semantic issue. And as you are using checkboxes, I don't think that getElementById is the way to go. You should either use the class attribute or add a containing element for those checkboxes and then iterate over its children elements (the checkboxes).
I wouldn't count on browsers allowing the name attribute as a substitute for IDs. If you assign all of your checkboxes a unique ID, you could just use some conditional checks to see if any of them are checked individually, such as:
function testCheckBox() {
var bikeCB = document.getElementById('bikeCB');
var carCB = document.getElementById('carCB');
if(bikeCB.checked) {
alert('An item is checked');
}else if(carCB.checked) {
alert('An item is checked');
}else { //after all have been checked
alert('No items are checked');
}
}
While you would need to add an ID for each checkbox in the HTML:
<input type="checkbox" id="bikeCB" value="Bike" /> I have a bike<br />
<input type="checkbox" id="carCB" value="Car" /> I have a car
If you are intent on looping through the checkboxes, you could give your form an ID and use the form.elements[] collection to loop through them and test for one being checked:
function testCheckBox() {
var form = document.getElementById('form1'); //get reference to form
var length = form.elements.length; //get length of form.elements array
for(i=0; i<length; i++) { //loop through while i is less than array length
if(form.elements[i].checked) {
alert('An item was checked');
}
}
}
This will alert for every checkbox that is checked. If you just wanted to know once if any were checked, you could possibly set a variable to true if any were checked, and then check if the variable was true after the for loop to know whether to alert or not.
By the way, you appear to be missing a closing </form> tag in your html after the <input> elements.
What you need is getElementsByName, not getElementById.
If you want to select by tag name, it's getElementsByTagName. If it's class names you want, getElementsByClassName (newer browsers only). You see? So use the right method depending on what you're selecting by.