stackoom
  简体   繁体   中英

selecting both radio buttons

 原文  2012-08-24 13:03:38  8   4    javascript

Question

NO JQUERY! I have two radio buttons and for some reason I can select both of them and I only want to be able to select one. For example, if you select Have a Baby, you can choose both radio buttons. Is there a simple way to fix this? Can someone help me achieve this by fixing the error in my code?

http://jsfiddle.net/LuzkA/ 

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

4 answers

solution1
 12 ACCPTED  2012-08-24 13:11:52

You have no name so that is why you can select both of them. Give them the same name! The browser will take care of only letting the user select one.

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

solution2
 4  2012-08-24 13:12:35

You have to give the radio buttons a name. easy 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>

solution3
 4  2012-08-24 13:12:37

Your radio buttons need the "name" attribute to not be empty.

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>

solution4
 4  2012-08-24 13:13:48

Your radio buttons don't have name values.

Only if they have name values they can be grouped as radio buttons

 Without name <form> <input type="radio" id="id1" name="" value="aa" />aa<br> <input type="radio" id="id2" name="" value="bb" />bb<br> </form> <hr /> With name <form> <input type="radio" id="id3" name="a" value="aa" />aa<br> <input type="radio" id="id4" name="a" value="bb" />bb<br> </form>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question selecting radio buttons in a function Selecting multiple radio buttons Multiple radio buttons not selecting in AngularJS javascript jquery selecting radio buttons Selecting Multiple Radio Buttons With Alert Selecting Radio Buttons from Links Selecting Checkboxes, Radio buttons and list Start and stop AJAX by selecting radio buttons Selecting a Group of Radio Buttons by Clicking on Button Selecting radio buttons in a row or a column in table
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM