Javascript : Multiple Checkbox Validation

I am trying to work out this code, but this thing is not working!
Javascript:

if(form.interest[0].checked==false && form.interest[1].checked==false && form.interest[2].checked==false && form.interest[3].checked==false)
{
alert("Please Check");
return false;
}

HTML:

<input type="checkbox" name="interest[]" value="News"/>News
        <input type="checkbox" name="interest[]" value="Health"/>Health
        <input type="checkbox" name="interest[]" value="Automobiles"/>Automobiles
        <input type="checkbox" name="interest[]" value="Internet"/>Internet

Please guide and tell me how to do multiple checkbox validation using javascript.

Answer:

The issue with your code is that in JavaScript, form elements are not accessed with PHP-like array syntax. You should use the document.getElementsByName method, which returns an array-like object of all child elements which have the given name.

You can then iterate over this array to check if any of the checkboxes are checked.

function validate() {
    var checkboxes = document.getElementsByName('interest[]');
    var isChecked = false;
    
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked) {
            isChecked = true;
            break;
        }
    }
    
    if (!isChecked) {
        alert("Please Check");
        return false;
    }
    
    return true;
}

And in your HTML form, you'll need to use this function validate() for submission. You can add it to the onsubmit attribute of the form. Here is an example:

<form onsubmit="return validate()">
    <input type="checkbox" name="interest[]" value="News"/>News
    <input type="checkbox" name="interest[]" value="Health"/>Health
    <input type="checkbox" name="interest[]" value="Automobiles"/>Automobiles
    <input type="checkbox" name="interest[]" value="Internet"/>Internet
    <input type="submit" value="Submit">
</form>

I hope this answers your question. Let me know if you have follow-up questions.

Like 0 Replies 2

Replies

Welcome, guest

Join CrazyEngineers to reply, ask questions, and participate in conversations.

Sign up Log in

CrazyEngineers powered by Jatra Community Platform

  • Kaustubh Katdare
    Kaustubh Katdare

    @thebigk • May 22, 2016

    I'd strongly using jQuery unless you've special interest in learning plain vanilla JS. That said, you should always look at the 'Console' in Chrome by inspecting your page.

    I'm not well versed with JavaScript; but here's a working example of your code. 

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CheckBox Validation</title>
    <script type="text/javascript" language="JavaScript">

        function checkCheckBoxes(theForm) {

            var test = document.getElementsByName("interest[]");

            if(test[0].checked==false && test[1].checked==false && test[2].checked==false)
            {
                alert("Please Check");
                return false;
            }

        }

    </script>
</head>
<body>

        <form action="" onsubmit="return checkCheckBoxes(this)" name="checkForm">

            <input type="checkbox" name="interest[]" value="News"/>News
            <input type="checkbox" name="interest[]" value="Health"/>Health
            <input type="checkbox" name="interest[]" value="Automobiles"/>Automobiles

            <p><input type="SUBMIT" value="Submit!"></p>

        </form>

</body>
</html>
    0
  • Anoop Kumar
    Anoop Kumar

    @anoop-kumar-GDGRCn • May 22, 2016

    If you really want to go with only javascript to build the foundation of scripting. Here is the code.
    HTML in Body tag

    <form name="fname">

        <input type="checkbox" name="interest" value="News" onclick="checkCheckBox()"/>News
        <input type="checkbox" name="interest" value="Health" onclick="checkCheckBox()"/>Health
        <input type="checkbox" name="interest" value="Automobiles" onclick="checkCheckBox()"/>Automobiles
        <input type="checkbox" name="interest" value="Internet" onclick="checkCheckBox()"/>Internet

    </form>

    Javascript code inside Head tag

    <script type="text/javascript">
        function checkCheckBox() {
           var chk_arr = document.fname.interest;
           for(var i = 0; i < chk_arr.length; i++){
               if(chk_arr[i].checked) {
                   console.log(chk_arr[i].value);
                   alert(chk_arr[i].value);
                }
            }
        }
    </script>

    Problems:

    1. You are not using document (primary node) to find the elements in page.
    2. How does javascript will be called. You need call piece of script (say a function) to execute on an event. Such as checking and unckecking of a checkbox.
    0