CODEWITHSUNDEEP
javascriptphpcsshtml
Mohit kumar
Mohit kumar

Reputation: 487

validation on checkbox not working

I am building a project on attendance management. In one of the forms of my project, I have multiple checkboxes. I want that at least one checkbox must be checked for form submission. I tried with Javascript but the problem is, it flag an alert even if one or more checkbox is checked.

Here is my js code :

function validat(){
            var a = document.getElementsByTagName("checkbox");
            var bool=false;
            for(var i=0;i<a.length;i++){
                if(a[i].checked==true){
                    bool=true;
                }
            }
            if(bool){
                return true;
            }
            else{
                alert("Sorry!Please select checkbox corresponding to students involved in duty leaves.");
                return false;
            }

Here's my checkbox code :

echo "<input type='checkbox' name=duty[]' value='$row[university_roll_no]'></td></tr>";

Upvotes: 2

Views: 733

Answers (5)

Chukwuemeka Inya
Chukwuemeka Inya

Reputation: 2671

I would have preferred you to use jQuery but with what you currently have, you need to do this:

var a = document.getElementsByTagName("input");

And then:

if(a[i].type == 'checkbox' && a[i].checked==true){
  // Checked alert
}

Upvotes: 0

Christos
Christos

Reputation: 53958

Since you need at least one checkbox to be checked you don't have to loop through all the checkboxes in your form. In the first found checkkbox you can stop. 

function validat(){
    var checkboxes = document.getElementsByTagName("checkbox");
    var atLeastOneCheckBoxIsChecked = false;
    for( var i = 0; i < checkboxes.length; i++ ){
        if( checkboxes[i].checked == true ){
            atLeastOneCheckBoxIsChecked = true;
            break;
        }
    }

    if(atLeastOneCheckBoxIsChecked){
        return true;
    }
    else {
        alert("Sorry!Please select checkbox corresponding to students involved in duty leaves.");
        return false;
    }
}

A more functional way to do the same thing, is to be use Array.prototype.some method:

function validat(){
    var atLeastOneCheckBoxIsChecked = document.getElementsByTagName("checkbox")
                                              .some(checkbox => checkbox.checked == true);

    if(atLeastOneCheckBoxIsChecked){
        return true;
    }
    else {
        alert("Sorry!Please select checkbox corresponding to students involved in duty leaves.");
        return false;
    }
}

Upvotes: 1

jcjr
jcjr

Reputation: 1503

Change your line

var a = document.getElementsByTagName("checkbox");

to

var a = document.querySelectorAll('input[type="checkbox"]');

Upvotes: 0

jh314
jh314

Reputation: 27802

You need to get input elements and check if type is "checkbox":

var a = document.getElementsByTagName("input");
for(var i = 0; i < a.length; i++) {
    if(inputs[i].type == "checkbox") {
        if (inputs[i].checked) {
            bool=true;
        }
    }  
}

Upvotes: 0

Elydasian
Elydasian

Reputation: 2066

Here you have an example:

function check() {
  var checkboxes = document.querySelectorAll('input[type="checkbox"]');
  var checkedOne = Array.prototype.slice.call(checkboxes).some(x => x.checked);

  if (!checkedOne) {
    console.log('please check at least one box!');
  }
  console.log(checkedOne);

}
<fieldset>
    <legend>Choose some monster features</legend>

    <div>
        <input type="checkbox" id="scales" name="feature" onClick=check()
               value="scales" checked />
        <label for="scales">Scales</label>
    </div>

    <div>
        <input type="checkbox" id="horns" name="feature" onClick=check()
               value="horns" />
        <label for="horns">Horns</label>
    </div>

    <div>
        <input type="checkbox" id="claws" name="feature" onClick=check()
               value="claws" />
        <label for="claws">Claws</label>
    </div>

</fieldset>

Upvotes: 1

Related Questions