CODEWITHSUNDEEP
javascript
Mohaideen
Mohaideen

Reputation: 303

getElementByTagName not working

When I click delete button without clicking any checkbox, it should show alert, but in this coding, if first checkbox checked, it doesn't show alert. If second checkbox checked, it show alert.

HTML: 

    <div id="checkbox">
       <input type="CHECKBOX" name="MyCheckbox" class="checkbox"  value="This..." >
       <input type="CHECKBOX" name="MyCheckbox" class="checkbox"  value="This..." >
       <input type="CHECKBOX" name="MyCheckbox" class="checkbox"  value="This..." >
       <input type="CHECKBOX" name="MyCheckbox" class="checkbox"  value="This..." >
   </div>
        <form action="DeleteServer" onsubmit="return checkCheckBoxes(this);">
            <input type="SUBMIT" value="Delete!">
        </form>

script function:

function checkCheckBoxes() {
    var chk = document.getElementById("checkbox").getElementsByTagName("input");
    for(var i=0; i<chk.length;i++){
       if (document.getElementById("checkbox").getElementsByTagName("input")[i].checked == false) 
       {
           alert ('You didn\'t choose any of the checkboxes!');
           return false;
       } else {    
           return true;
       }
      }
    }

Upvotes: 0

Views: 209

Answers (3)

Mohaideen
Mohaideen

Reputation: 303

function checkCheckBoxes() {
      var inputs     = document.querySelectorAll('#checkbox input');
      is_checked = false;

        for(var i = 0; i < inputs.length; i++) {
            if(inputs[i].type == 'checkbox') {
                is_checked = inputs[i].checked;
                if(is_checked) return true;
            }
        }

        if(!is_checked){
          alert('You didn\'t choose any of the checkboxes!');
          return false;
        }
    }

Upvotes: 0

nils
nils

Reputation: 1668

This should solve your problem:

var inputs     = document.querySelectorAll('#checkbox input');
    is_checked = false;

for(var i = 0; i < inputs.length; i++) {
    if(inputs[i].type == 'checkbox' && inputs[i].name == 'MyCheckbox') {
        is_checked = inputs[i].checked;
        if(is_checked) break;
    }
}

if(!is_checked){
  alert('You didn\'t choose any of the checkboxes!');
}

Here is a fiddle

Upvotes: 2

Quentin
Quentin

Reputation: 943214

getElementsByTagName has an s in it. It is plural. It returns a NodeList not a single Element.

Given your HTML, that NodeList will include 2 separate inputs.

You have to loop over it (as if it was an Array) and test the checked property of each input in turn.

Upvotes: 3

Related Questions