checkboxes와 함께 document.getElementsByClass 사용

Question

이 코드를 자르고 클래스를 사용하는 것이 익숙하지 않습니다.

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

사용자가 동일한 클래스 (즉, 소리) 아래에있는 확인란 중 하나 이상을 선택한 다음 제출을 누릅니다. 사용자에게 그 클래스를 선택했음을 알립니다. 그러나 명백하게 그것은 오히려 항상 나를 알려주지 않을 것입니다. 도움 말 하시겠습니까?

Answer 1

document.getElementsByClassName 컬렉션을 반복해야하고 checked 속성을 확인해야합니다.

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

Answer 2

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

Answer 3

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