javascript - 将 document.getElementsByClass 与复选框一起使用

Question

我已经删减了这段代码，但我对使用 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>

这是我正在处理的提交功能。

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

我想做的是，如果用户至少选中同一类(即声音)下的一个复选框，然后按下提交。它会提醒用户他/她选择了该类(class)。但显然它不会，而是它总是提醒我没有。帮忙？

Answer 1

您必须遍历集合 document.getElementsByClassName 返回并检查已检查的属性。这是一种方法(未经测试):

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');
  }
}

如果你会使用 jQuery，你可能会做这样的事情:

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