如何从单选按钮输出值

how to output value from radio button

本文关键字：输出 单选按钮      更新时间：2023-09-26

我正在尝试用innerHTML输出radio的值但我在这方面并不成功。出了什么问题？

<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 />

它是getElementsByName（复数）。

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

jsFiddle示例

您可能希望将值（userInputgender[i].value;）返回到您的div。

您可以使用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/

<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>

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!'; 
    }
  }
});
相关文章：