选择两个单选按钮
selecting both radio buttons
没有JQUERY!我有两个单选按钮,出于某种原因,我可以同时选择它们,我只想选择一个。例如,如果选择"生孩子",则可以同时选择两个单选按钮。有没有一个简单的方法来解决这个问题?有人能帮我解决代码中的错误吗?
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>
您没有名称,因此可以同时选择这两个名称。给他们取同样的名字!浏览器只允许用户选择一个。
<input type="radio" name="radiobtn" id="rd1" value="" onclick="showChoice(this)"/>
<input type="radio" name="radiobtn" id="rd2" value="" onclick="showChoice(this)"/>
您必须为单选按钮命名。简易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>
单选按钮需要"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>
您的单选按钮没有名称值。
只有当它们具有名称值时,才能将它们分组为单选按钮
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>
相关文章:
- 多个单选按钮组相互干扰
- Spring WebFlow2 Javascript只在第一个单选按钮上工作
- AngularJS中没有选择多个单选按钮
- 选择两个单选按钮
- 交互2个单选按钮2个不同的功能Javascript
- 如何使用顺序ID禁用多个单选按钮
- 多个单选按钮窗体、单个组无法检索值
- 多个单选按钮,需要将选定的值传递给javascript
- 单击时是否可以从1个单选按钮传递两(2)个值
- AngularJS ng-repeat,两个单选按钮无法正常工作
- JavaScript 侦听两个单选按钮响应并显示隐藏的文本框
- 如何使用两个单选按钮使显示隐藏两个文本框
- 带有两个单选按钮的谷歌自定义搜索
- 是否选中了两个或三个单选按钮中的任何一个
- 两个单选按钮共享一个“id”
- 在两个单选按钮之间切换
- 计算两个单选按钮组的组合值
- 同步两个单选按钮(进度4GL, JS和HTML)
- 为什么两个单选按钮都被选择为ng值=“n”;真“;并且值=“0”;1〃;
- 如何显示两个单选按钮在html中彼此相邻