I have cut this code and I'm not that familiar using Class.

<form>
    <input type="checkbox" name="Symptom1" class=sound value="case1"> Poor Sound Quality<br>
    <input type="checkbox" name="Symptom2" class=sound value="case2"> Only One Speaker is Working<br>
    <input type="checkbox" name="Symptom3" class=sound value="case3"> No Sound<br>
    <input type="checkbox" name="Symptom4" class=sound value="case4"> Low Volume<br>
    <input type="checkbox" name="Symptom5" class=sound value="case5"> Crackling Sound<br>
    <input type="checkbox" name="Symptom6" class=battery value="case6"> Drain Easily<br>
    <input type="checkbox" name="Symptom7" class=battery value="case7"> Flickering Screen<br>
    <input type="checkbox" name="Symptom8" class=battery value="case8"> Battery Physically Wobbled<br>
    <input type="checkbox" name="Symptom9" class=battery value="case9"> Turn Off from Now and Then<br>
    <input type="checkbox" name="Symptom10" class=battery value="case10"> Does not Charge<br>
</form>
<button onclick="Submit()">Submit</button>

Here is my submit function that I am working on.

function Submit() {
    if (document.getElementsByClassName('sound').checked) {
        alert("You Picked Sound");}
    } else {
        alert("none");
    }
}

What I wanted to do is if the user checked at least one of the checkboxes under the same class (i.e. sound) then pressed submit. It would alert the user that he/she picked that class. But apparently it would not and rather it always alert me with none. Help?

I have cut this code and I'm not that familiar using Class.

<form>
    <input type="checkbox" name="Symptom1" class=sound value="case1"> Poor Sound Quality<br>
    <input type="checkbox" name="Symptom2" class=sound value="case2"> Only One Speaker is Working<br>
    <input type="checkbox" name="Symptom3" class=sound value="case3"> No Sound<br>
    <input type="checkbox" name="Symptom4" class=sound value="case4"> Low Volume<br>
    <input type="checkbox" name="Symptom5" class=sound value="case5"> Crackling Sound<br>
    <input type="checkbox" name="Symptom6" class=battery value="case6"> Drain Easily<br>
    <input type="checkbox" name="Symptom7" class=battery value="case7"> Flickering Screen<br>
    <input type="checkbox" name="Symptom8" class=battery value="case8"> Battery Physically Wobbled<br>
    <input type="checkbox" name="Symptom9" class=battery value="case9"> Turn Off from Now and Then<br>
    <input type="checkbox" name="Symptom10" class=battery value="case10"> Does not Charge<br>
</form>
<button onclick="Submit()">Submit</button>

Here is my submit function that I am working on.

function Submit() {
    if (document.getElementsByClassName('sound').checked) {
        alert("You Picked Sound");}
    } else {
        alert("none");
    }
}

What I wanted to do is if the user checked at least one of the checkboxes under the same class (i.e. sound) then pressed submit. It would alert the user that he/she picked that class. But apparently it would not and rather it always alert me with none. Help?

• javascript

Share Improve this question Follow edited Dec 18, 2013 at 3:31 MultiplyByZer0 7,16933 gold badges3434 silver badges4949 bronze badges asked Dec 18, 2013 at 3:25 JakeJake 3311 gold badge11 silver badge33 bronze badges 3

• 1 document.getElementsByClassName returns a node list so loop through them. – PSL Commented Dec 18, 2013 at 3:26
• Please read the documentation. – Felix Kling Commented Dec 18, 2013 at 3:29
• 2 use !! document.querySelector(".sound:checked") to tell if any are checked. – dandavis Commented Dec 18, 2013 at 3:30

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You have to loop through the collection document.getElementsByClassName returns and check the checked attribute. Here's one way to do it (untested):

function Submit() {
  var pickedOne = false;
  var inputs = document.getElementsByClassName('sound');
  for(var i = 0, l = inputs.length; i < l; ++i) {
    if(inputs[i].checked) {
      pickedOne = true;
      alert('You picked ' + inputs[i].className);
      break;
    }
  }
  if(!pickedOne) {
    alert('none');
  }
}

If you can use jQuery, you can probably do something like this instead:

function Submit() {
  var selectedClass = $('input[type=checkbox]:checked').attr('class');
  if(selectedClass) {
    alert('You picked ' + selectedClass);
  }
  else {
    alert('none');
  }
}

"document.getElementsByClassName" return a list of nodes. For example document.getElementsByClassName('sound') will return an array 5 checkboxes. So you can use it like this:

var sounds = document.getElementsByClassName('sound');
// Now you can access one of them through it's index 
function Submit() {
    if (document.getElementsByClassName('sound')[0].checked) {
        alert("You Picked Sound");}
    } else {
        alert("none");
    }
}

document.getElementsByClassName() returns an array instead of an object. You need to loop through the array.

function Submit() {
    var allCheckBox = document.getElementsByClassName('sound');
    var allPick = false;
    for(var i = 0; i < allCheckBox.length ; i++) {
        if (allCheckBox[i].checked) {
            allPick = true;
            break;
        }
    }

    if(allPick) {
        alert("You Picked Sound");
    } else {
        alert("none");
    }    
}