获取单选按钮选择

时间:2012-08-23 13:15:10

标签: radio-button

没有意思!当用户选择Have a Baby或Military leave单选按钮弹出时。我无法获取所选按钮的值并将id =“choice”的innerHTML更改为值。有人可以帮忙吗?

http://jsfiddle.net/73Vq9/

<html>
<head>
<script>
//this function deals with changing the event
function changeMessage(oElement) {
    //have a baby
    if (oElement.value == "100") {
        document.getElementById("btn").style.display = "none";
        document.getElementById("radio").style.display = "inline-block";
        document.getElementById("rd1").innerHTML = "C-Section";
        document.getElementById("rd2").innerHTML = "Regular Birth";
        document.getElementById("rd1").value = "C-Section";
        document.getElementById("rd2").value = "Regular Birth";
    //military leave
    } else if (oElement.value == "15") {
        document.getElementById("btn").style.display = "none";
        document.getElementById("radio").style.display = "inline-block";
        document.getElementById("rd1").innerHTML = "Training";
        document.getElementById("rd2").innerHTML = "Active Duty";
        document.getElementById("rd1").value = "Training";
        document.getElementById("rd2").value = "Active Duty";
    //no value, the first, blanck value
    } else if (oElement.value == "0") {
        document.getElementById("btn").style.display = "none";
        document.getElementById("radio").style.display = "none";

    } else {
        document.getElementById("btn").style.display = "inline-block";
        document.getElementById("radio").style.display = "none";
    }
    return;
}
</script>
</head>
<body>


<div style="margin-left:250px;">
<select id="leave" onchange="changeMessage(this);">
  <option value="0"></option>
  <option value="5">Get Married</option>
  <option value="100">Have a Baby</option>
  <option value="90">Adopt a Child</option>
  <option value="35">Retire</option>
  <option value="15">Military Leave</option>
  <option value="25">Medical Leave</option>
</select>
 <button id="btn" style="display:none" onclick="getInfo()"type="button">Process</button>
</div>
<div id="radio" style="display:none">
    <div id="rd1"></div><input type="radio" name="sex" value="" />
    <div id="rd2"></div><input type="radio" name="sex" value=""/>
</div>
    <div id="choice">Radio Choice</div>

1 个答案:

答案 0 :(得分:2)

您的input值永远不会设置,因此始终为空。

当您在上一个问题[{3}}中更改了代码时,您将idinput移到了<div>,因此您的JavaScript不再设置输入值。

您需要更改JavaScript以正确设置输入,然后输入:

HTML

<input type="radio" name="sex" value="" onclick="showChoice(this)"/>

的JavaScript

function showChoice(input) {
    document.getElementById('choice').innerHTML = "Radio Choice=" + input.value;
}

应在<div id="choice">

中附加所选输入的值