Question

没有意思！我有两个单选按钮，由于某种原因我可以选择它们，我只想选择一个。例如，如果选择“有婴儿”，则可以选择两个单选按钮。有没有一种简单的方法来解决这个问题？有人可以通过修复我的代码中的错误来帮助我实现这一目标吗？

<html>
<head>
<title>Life Event Picker Calendar</title>
<script>
function changeMessage(oElement) {
    var rd1 = document.getElementById("rd1");
    var rd1Text = rd1.parentNode.getElementsByTagName('span')[0];
    var rd2 = document.getElementById("rd2");
    var rd2Text = rd2.parentNode.getElementsByTagName('span')[0];

    document.getElementById('choice').innerHTML = "Radio Choice=";
    rd1.checked = false;
    rd2.checked = false;
    //nothing
    if (oElement.value == "0") {
        document.getElementById("btn").style.display = "none";
        document.getElementById("radio").style.display = "none";
        document.getElementById("day").innerHTML = "Date";
    //have a baby
    } else if (oElement.value == "100") {
        document.getElementById("btn").style.display = "none";
        document.getElementById("radio").style.clear = "both";
        document.getElementById("radio").style.display = "inline-block";
        rd1Text.innerHTML = "C-Section";
        rd2Text.innerHTML = "Regular Birth";
        rd1.value = "C-Section";
        rd2.value = "Regular Birth";
        document.getElementById("day").innerHTML = "Anticipated Due Date";
    //military leave
    } else if (oElement.value == "15") {
        document.getElementById("btn").style.display = "none";
        document.getElementById("radio").style.clear = "both";
        document.getElementById("radio").style.display = "inline-block";
        rd1Text.innerHTML = "Training";
        rd2Text.innerHTML = "Active Duty";
        rd1.value = "Training";
        rd2.value = "Active Duty";
        document.getElementById("day").innerHTML = "Anticipated Leave Date";
    //get married
    } else if (oElement.value == "5") {
        document.getElementById("btn").style.display = "inline-block";
        document.getElementById("radio").style.display = "none";
        document.getElementById("day").innerHTML = "Marriage Date";
    //adopt a child
    } else if (oElement.value == "90") {
        document.getElementById("btn").style.display = "inline-block";
        document.getElementById("radio").style.display = "none";
        document.getElementById("day").innerHTML = "Anticipated Adoption Date";
    //retire
    } else if (oElement.value == "35") {
        document.getElementById("btn").style.display = "inline-block";
        document.getElementById("radio").style.display = "none";
        document.getElementById("day").innerHTML = "Anticipated Retirement Date";
    //medical leave
    } else if (oElement.value == "25") {
        //document.getElementById("btn").style.display = "inline-block";
        document.getElementById("radio").style.display = "none";
        document.getElementById("day").innerHTML = "Anticipated Disability Date";       
    } else {}
    return;
}

    function showChoice(input) {
        document.getElementById('choice').innerHTML = "Radio Choice=" + input.value;
        document.getElementById("btn").style.display = "inline-block";
    }

//gets info picked and displays messages
function getInfo() {
    var myDate=new Date();
    var ev_num = parseInt(document.getElementById("leave").value)
    myDate.setFullYear(sel_year.value,sel_month.value,sel_day.value);
    var event_value = document.getElementById("leave").value;
    //document.getElementById("date").innerHTML = "The date you have selected to begin your time of absence is ..." + "<b>" + myDate + "</b>";

    //if ((document.getElementById("rd1").checked) == true) {
    //document.write(document.getElementById("rd1").value);}

    //get married
    if (event_value == 5) {

    //have a baby
    } else if (event_value == 100) {
        var first_number = new Date(myDate);
        first_number.setDate(myDate.getDate() + 31);
        var second_number = new Date(myDate);
        second_number.setDate(myDate.getDate() - 30);
        var third_number = myDate.getDate() + 7;
        var fourth_number;
        var fifth_number1;
        var fifth_number2;
        //if the first radio button has been selected
        if ((document.getElementById("rd1").checked) == true) {
            fourth_number = myDate.getDate() + 56;
            fifth_number1 = myDate.getDate() + 57;
            fifth_number2 = myDate.getDate() + 91;
        //if the second radio button has been selected
        } else {
            fourth_number = myDate.getDate() + 42;
            fifth_number1 = myDate.getDate() + 43;
            fifth_number2 = myDate.getDate() + 91;
        }
        document.getElementById("message1").innerHTML = "From " + myDate + " through " + first_number + "<br/>" + "You are eligible to update coverage and personal information through your 'Have a Baby' Life Event.";
        document.getElementById("message2").innerHTML = "From " + second_number + " through " + myDate + "<br/>" + "1) Call 1-877-968-7762 to initiate your leave. <br/>" + "2) Complete Authorization Release Form.";
    //adopt a child 
    } else if (event_value == 90) {

    //retire
    } else if (event_value == 35) {

    //military leave
    } else if (event_value == 15) {

    //medical leave
    } else if (event_value == 25) {

    } else {}
    //document.getElementById("event").innerHTML = "Based on the event you have selected you will miss  ... " + "<b>" + document.getElementById("leave").value + " days." + "</b>";
    //myDate.setDate(myDate.getDate() + ev_num);
    //document.getElementById("return").innerHTML = "You will be expected back on ..." + "<b>" + myDate + "</b>";
}
</script>
</head>
<body>

Life Event Picker Calendar<br>
<hr align="left" width="200px"/>
<div id="life" style="display:inline-block;">Life Event</div><div id="day" style="display:inline-block; margin-left:100px;">Date</div><br>

    <select style="float:left;" 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>    

<div id="calendar-container" style="float:left;" ></div>

    <button id="btn" style="display:none;" onclick="getInfo()"type="button">Process</button>

<br>
<div id="radio" style="display:none">
    <label><span></span><input type="radio" name="" id="rd1" value="" onclick="showChoice(this)"/></label>
    <label><span></span><input type="radio" name="" id="rd2" value="" onclick="showChoice(this)"/></label>
</div>

<div id="choice">Radio Choice</div><br>
<div id="date"></div>
<div id="event"></div>
<div id="return"></div>
<div id="yourdate"></div>

<div id="message1">Message 1</div><br>
<div id="message2">Message 2</div><br>
<div id="message3">Message 3</div><br>
<div id="message4">Message 4</div><br>
<div id="message5">Message 5</div>

Answer 1

您没有名字，所以您可以选择这两个名称。给他们相同的名字！浏览器只会让用户选择一个。

<input type="radio" name="radiobtn" id="rd1" value="" onclick="showChoice(this)"/>
<input type="radio" name="radiobtn" id="rd2" value="" onclick="showChoice(this)"/>

Answer 2

您必须为单选按钮指定名称。容易Peasy

<div id="radio">
<label><span></span><input type="radio" name="boom" id="rd1" value="" onclick="showChoice(this)"/></label>
<label><span></span><input type="radio" name="boom" id="rd2" value="" onclick="showChoice(this)"/></label>

Answer 3

您的单选按钮需要“name”属性不为空。

http://jsfiddle.net/LuzkA/1/

<label><span></span><input type="radio" name="something" id="rd1" value="" onclick="showChoice(this)"/></label>
<label><span></span><input type="radio" name="something" id="rd2" value="" onclick="showChoice(this)"/></label>

Answer 4

您的单选按钮没有名称值。

只有它们具有名称值，才能将它们分组为单选按钮

http://jsfiddle.net/LBv3n/1/

选择两个单选按钮

4 个答案: