使用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和複選框

回答

相關問題