라디오 버튼에서 값을 출력하는 방법

Question

innerHtml과 함께 라디오의 값을 출력하려고합니다. 하지만이 작업에는 성공하지 못합니다. 무슨 일 이니?

<script>function changeText(){ 
var userInputgender = document.getElementByName('gender'); 
for (var i = 0, length = radios.length; i < length; i++) { 
if (radios[i].checked) { 

    document.getElementById('output1').innerHTML = userInputgender; 


    break; 
} 
} 
return false; 
} 
</script> 

<form method="get" onsubmit="return changeText()"> 
<input type="radio" name="gender" id="male" value="man" />Man 
<input type="radio" name="gender" id="female" value="woman" />Woman<br /> 
<br /><br /> 
<input type="submit" value="Submit" /> 
</form> 

<!-- here comes the output --> 
<b id='output1'></b><br /> 

Answer 1

그것은 (복수) getElementsByName입니다.

jsFiddle example

function changeText() { 
    var userInputgender = document.getElementsByName('gender'); 
    for (var i = 0, length = userInputgender.length; i < length; i++) { 
     if (userInputgender[i].checked) { 
      document.getElementById('output1').innerHTML = userInputgender[i].value; 
      break; 
     } 
    } 
    return false; 
} 

그리고 당신은 아마 값 ( userInputgender[i].value;가) 당신의 사업부로 반환합니다.

Answer 2

jquery를 사용할 수 있습니다. 훨씬 좋습니다. 이 예를 살펴 보겠습니다 :

HTML :

<input type="radio" name="gender" id="male" value="man" />Man 
<input type="radio" name="gender" id="female" value="woman" />Woman<br /> 
<input id="button" type="button" value="Submit" /> 
<b id='output1'></b> 

JS :

$("#button").click(function(){ 
    var $name = $('input[name=gender]:checked').val(); 
    $("#output1").text($name); 
}); 

http://jsfiddle.net/LZWau/1/

Answer 3

<script type="text/javascript"> 

function changeText() 
{ 
    //get your 2 radio buttons 
    var userInputgender = document.getElementsByName('gender'); 
    //loop on the buttons you found 
    for(var i=0;i<userInputgender.length;i++) 
    { 
     //is the button checked? 
     if(userInputgender[i].checked) 
     { 
     //fill the result element with the button value 
     document.getElementById('output1').innerHTML = userInputgender[i].value; 
     } 
    } 
    //return false so the form won't commit 
    return false; 
} 

</script> 

<form method="get" onsubmit="return changeText()"> 
    <input type="radio" name="gender" id="male" value="man" />Man 
    <input type="radio" name="gender" id="female" value="woman" />Woman<br /> 
<br /><br /> 
<input type="submit" value="Submit" /> 
</form> 

<b id='output1'></b><br /> 

</script> 

Answer 4

http://jsfiddle.net/ayy28/4/

var form = document.forms[0]; 
var userInputsgender = document.getElementsByName('gender'); 
form.addEventListener('submit', function(evt){ 
    evt.preventDefault(); 
    for (var i = 0, length = userInputsgender.length; i < length; i++) { 
    if (userInputsgender[i].checked) { 
     document.getElementById('output1').innerHTML = userInputsgender[i].value; 
     break; 
    } 
    else { 
    document.getElementById('output1').innerHTML = 'No gender was selected!'; 
    } 
    } 
});