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:

News
        Health
        Automobiles
        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:

News Health Automobiles Internet

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

Replies

  • Kaustubh Katdare
    Kaustubh Katdare
    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.

    
    
    
        
        CheckBox Validation
        
    
    
    
            
    News Health Automobiles

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

    News Health Automobiles Internet
    Javascript code inside Head tag
    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.

You are reading an archived discussion.

Related Posts

We are all aware of the most prominent light sources that help us to accomplish our daily tasks. All life on earth would cease, had it not been for the...
Yet another luxury automobile, the Mercedes GLC SE SUV, is set to be officially launched by Mercedes Benz on 2nd June in India, in a bid to prove their tagline...
Elon Musk's next generation transportation is on its way to real world with its successful trial of technology last week. Today an article describing the updated features and cost analysis...
Are you a professional or a hobbyist? An engineer by choice or chance? Do you have a keen interest in sports? Or may be it's the urge of knowing, that...
Catalyst- a common expression which appears in almost every chapter of a chemistry textbook holds a key role in deciding the fate of a chemical reaction. Be it organic or...