Javascript : Multiple Checkbox Validation

Member

Updated: Oct 26, 2024

Views: 2.0K

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.

Replies

Howdy guest!

Dear guest, you must be logged-in to participate on CrazyEngineers. We would love to have you as a member of our community. Consider creating an account or login.

Replies

Kaustubh Katdare

Administrator • 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>

Are you sure? This action cannot be undone.

Cancel

Anoop Kumar

Member • 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:

You are not using document (primary node) to find the elements in page.
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.

Are you sure? This action cannot be undone.

Cancel