Javascript Checkbox Validation not Checking if Ticked

Question

I've looked through a lot of the questions that people have already asked on this, but I cannot find a solution that has helped me.

I'm a beginner to programming so know little about what to do, I have four check boxes and to submit the form, you have to select at least one of them, but no message comes up and the form is able to be submitted without one of the boxes being ticked.

This is my code below:

        <tr>
       <td align="right">
        <label for="erdbeersocken"><p>Erdbeersocken<sup>*</sup>:</label>
        <br>
        <label for="armstulpen">Armstulpen<sup>*</sup>:</label>
        <br>
        <label for="cupcakes">Cupcakes<sup>*</sup>:</label>
        <br>
        <label for="babykleidung">Babykleidung<sup>*</sup>:</label>
        <br>
       </td>       
       <td align="left">
<form action="../" onsubmit="return checkCheckBoxes(this);">
    <input type="CHECKBOX" name="CHECKBOX_1" value="Erdbeersocken">
    <br>
    <input type="CHECKBOX" name="CHECKBOX_2" value="Armstulpen">
    <br>
    <input type="CHECKBOX" name="CHECKBOX_3" value="Cupcakes">
    <br>
    <input type="CHECKBOX" name="CHECKBOX_4" value="Babykleidung">
    <br>
    <input type="SUBMIT" value="Submit!">
    </td>
</tr>   
</form>

<script type="text/javascript" language="JavaScript">
<!--
function checkCheckBoxes(theForm) {
    if (
    theForm.CHECKBOX_1.checked == false or
    theForm.CHECKBOX_2.checked == false or
    theForm.CHECKBOX_3.checked == false or
    theForm.CHECKBOX_4.checked == false)
    {
        alert ('You didn\'t choose any of the checkboxes!');
        return false;
    } else {    
        return true;
    }
}
//-->
</script>

Which looks like: Text here (Checkbox here)

I'm using Notepadd++ more advanced code does not seem to work, so if anyone could help me with simplified JavaScript, I would really appreciate it. :)

Answer 1

  function checkCheckBoxes(theForm) {
     if ($("input[type='checkbox']:checked").length){
        return true;
     }else{
          alert ('You didn\'t choose any of the checkboxes!');
         return false;
     }
 }

Answer 2

For your form, you should give all the checkboxes the same name but give each checkbox a different value -- this will create an array for your checkboxes (see note at bottom of response if you don't yet know what an array is):

<input type="CHECKBOX" name="CHECKBOX" value="Erdbeersocken">
<br>
<input type="CHECKBOX" name="CHECKBOX" value="Armstulpen">
<br>
<input type="CHECKBOX" name="CHECKBOX" value="Cupcakes">
<br>
<input type="CHECKBOX" name="CHECKBOX" value="Babykleidung">

then in your confirm submit function you want to use a for loop with two nested if statements to check if a checkbox has been checked. I'll give you an example of some code I recently did:

var interestsSelected = false;
for (var i = 0; i < document.forms[0].interests.length; ++i ) {
if (document.forms[0].interests[i].checked == true) {
interestsSelected = true;
break;
//code gives go ahead for submission because at least one checkbox has been checked
        }
    }
 if (interestsSelected !=true) {
        window.alert("You must select at least one hobby or interest");
        return false;
        //code Woot woot woot!  It all works!
    }

This was my form section for the checkboxes:

<input type="checkbox" name="interests" value="technology" />Technology <br />
<input type="checkbox" name="interests" value="arts" />The Arts <br />
<input type="checkbox" name="interests" value="music" />Music <br />
<input type="checkbox" name="interests" value="film" />Movies <br/> 
<input type="checkbox" name="interests" value="shopping" />Shopping <br />
<input type="checkbox" name="interests" value="outdoor" />Camping <br />
<input type="checkbox" name="interests" value="garden" />Gardening <br />

As a fellow beginner :) I often find it useful if everything is spelled out in as simple a language as possible so I'm going to provide some details here that you might or might not already know.

Anytime you create a form, an array for the form is automatically created (you won't see it listed anywhere, the browser will automatically create one when it accesses the form data BUT you can (should) refer to it in your coding). So if you have one form on your page you will have an array forms[0], if you have two different forms on your page then the first form will have an array forms[0] and the second form will have an array forms[1], each containing all of the elements in the respective forms.

If you name all your checkboxes the same name, you are essentially creating an array within an array -- the big Mama Bear array is forms[0] and nestled inside her is the Baby Bear array (your checkbox name[]).

In order to reference the Baby Bear array, you have to acknowledge the Mama Bear array first: that is why in the code example I gave above, you see "document.forms[0]" (the Mama Bear array) followed by ".interests[i]" (the Baby Bear array).

Hope this helps :)

Answer 3

HTML for my example

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<p>Select a box</p>
<form id="aform">
    <input type="checkbox">
    <input type="checkbox">
</form>

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="test.js"></script>
</body>
</html>

And the javascript in its own file (always seperate code from css and from html)

window.onload=function() {
    $("#aform").change(function () {
        alert('a box is checked');
    })
};