Checkbox validation not working

[multichild]

I just want to check if any of the checkboxes have been selected when the user clicks submit.

This is what my checkboxes currently output like.

<table border='0' >
<tr>
<td class="top"><b><a name="std">STANDARDS</a></b></td></tr>
<td class="t1"><input class="standardsCheck" type='checkbox' id='standardsCheck[2]' name='chstd[2]'>PoolCheck</td>
<td class="t1"><input class="standardsCheck" type='checkbox' id='standardsCheck[4]' name='chstd[4]'>AquaCheck</td>
<td class="t1"><input class="standardsCheck" type='checkbox' id='standardsCheck[5]' name='chstd[5]'>FireCheck</td>					     </tr>	
<td class="t1"><input class="standardsCheck" type='checkbox' id='standardsCheck[7]' name='chstd[7]' >CrisisCheck</td>
<td class="t1"><input class="standardsCheck" type='checkbox' id='standardsCheck[8]' name='chstd[8]'>EcoCheck</td>
<td class="t1"><input class="standardsCheck" type='checkbox' id='standardsCheck[9]' name='chstd[9]'>SafetyCheck</td>
</tr>	
</table>

and this is my jscript inside the validation function

function validation()
{
var checked=false;
var elements = document.getElementsByName('chstd[]');
for(var i=0; i < elements.length; i++){
    alert(elements[i]);
if(elements[i].checked) {
    checked = true;
    }
}
if (!checked) {
    alert('Yada yada yada, some error message');
    return false;
    }
}

But I cant get it to alert me only when there no checkboxes selected, it alerts me on both occassions.

[DaveMaxwell]

That’s because you don’t put an “array” counter in the element id/name

<table border='0' >
<tr>
<td class="top"><b><a name="std">STANDARDS</a></b></td></tr>
<td class="t1"><input class="standardsCheck" type='checkbox' id='standardsCheck' name='chstd' value="Pool">PoolCheck</td>
<td class="t1"><input class="standardsCheck" type='checkbox' id='standardsCheck' name='chstd' value="Aqua">AquaCheck</td>
<td class="t1"><input class="standardsCheck" type='checkbox' id='standardsCheck' name='chstd' value="Fire">FireCheck</td>					     </tr>	
<td class="t1"><input class="standardsCheck" type='checkbox' id='standardsCheck' name='chstd' value="Crisis">CrisisCheck</td>
<td class="t1"><input class="standardsCheck" type='checkbox' id='standardsCheck' name='chstd' value="Eco">EcoCheck</td>
<td class="t1"><input class="standardsCheck" type='checkbox' id='standardsCheck' name='chstd' value="Safety">SafetyCheck</td>
</tr>	
</table>

function validation()
{
var checked=false;
var elements = document.getElementsByName('chstd');
for(var i=0; i < elements.length; i++){
if(elements[i].checked) {
    alert(elements[i].value);
    checked = true;
    }
}
if (!checked) {
    alert('Yada yada yada, some error message');
    return false;
    }
}

[igor_g]

Should be…

<input class="standardsCheck" type='checkbox' id='standardsCheck[2]' name='chstd[]' />

and actually I think, you need no ids.

[multichild]

Ah I see, yes that’s silly of me to keep that in.

Thought that would do it, but still getting the issue of on submit the alert shows when there checkboxes checked and not checked.

Got this:

function validation()
{
var checked=false;
var elements = document.getElementsByName('chstd');
for(var i=0; i < elements.length; i++){
if(elements[i].checked) {
        checked = true;
    }
}
if (!checked) {
    alert('Yada yada yada, some error message');
    return false;
    }
}

<input type="submit" name="btnadd" value="Submit" onClick="return validation();">

<td class="t1"><input class="standardsCheck" type="checkbox" name="chstd[5]" checked="checked">FireCheck</td>

After debugging, it seems its not recognising when a checkbox is checked.

So even though I have 2 checked, when I alert as below, it comes back with 0

var elements = document.getElementsByName("chstd");
alert(elements.length);

[m3g4p0p]

@multichild

So even though I have 2 checked, when I alert as below, it comes back with 0

var elements = document.getElementsByName("chstd");
alert(elements.length);

You don’t have any elements with the name chstd, just chstd[2], chstd[3] and so on. I’d suggest to query those elements by their classes instead, e.g.

var elements = document.querySelectorAll('.standardsCheck')

Or you use the regular array notation (without indices) as suggested by @igor_g.

[DaveMaxwell]

@m3g4p0p

Or you use the regular array notation (without indices) as suggested by @igor_g.

Or take out the array indices all together like I suggested in post #2. The array indicator isn’t needed because the form collection on the backside will load all elements of the same name into an array anyways, so it’s unneeded.