使用document.getElementsByClass和复选框

我已经削减了这个代码，我不熟悉使用类。使用document.getElementsByClass和复选框

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

我想要做的是如果用户至少检查了同一类（即声音）下的复选框之一，然后按提交。它会提醒用户他/她选择了该课程。但显然它不会，而且总是没有提醒我。帮助？

来源

2013-12-18 Jake

'document.getElementsByClassName'通过返回一个节点列表，以便循环他们。 – PSL

[请阅读文档]（https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName）。 –

使用！ document.querySelector（“。sound：checked”）来判断是否有任何检查。 – dandavis

您必须遍历集合document.getElementsByClassName返回并检查checked属性。下面就来做到这一点（未经测试）的一种方法：

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

来源

2013-12-18 03:53:34 Troy

“document.getElementsByClassName”返回一个节点列表。例如document.getElementsByClassName('sound')将返回数组5复选框。所以你可以这样使用它：

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

来源

2013-12-18 03:37:42 HICURIN

document.getElementsByClassName()返回一个数组而不是一个对象。你需要遍历数组。

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

来源

2013-12-18 03:41:22 edisonthk

使用document.getElementsByClass和复选框

回答

相关问题