JavaScript 单选按钮
javascript radio button
本文关键字:单选按钮 JavaScript 更新时间:2023-09-26
我正在尝试制作一些项目,其中我希望在选择专家按钮时显示文本框,而单击学习者按钮时不显示文本框....
我已经编写了这段代码,但无法解决问题...请帮忙...
<html>
<head>
<script language="javascript">
function toggleContent(showHideDiv, switchTextDiv) {
var text = document.getElementById(showHideDiv);
var ele = document.getElementById(switchTextDiv);
var rad_val='';
for (var i=0; i < document.text.role.length; i++)
{
if (document.text.role[i].checked)
{
rad_val = document.text.role[i].value;
}
}
if(rad_val=='learner'){
ele.style.display = "block";
}
else {
ele.style.display = "none";
}
}
</script>
</head>
<body>
<table>
<tr >
<td ><option value="1"> 1 </option>
</td>
<td> Role </td>
<form id="form1">
<td><label>
<input type="radio" name="role" value='learner' onClick="toggleContent('form1','div1')" >
Learner </label>
</td>
<td><label>
<input type="radio" name="role" value='expert' onClick="toggleContent('form1','div1')" >
Expert </label>
</form>
<td ><div ID="div1" align=right style="display:none;">
<label class="labell labelUser" >why?</label>
<textarea name="description" align="right" id="description" cols="40" rows="5" class="inputbox">Why?</textarea>
<span id="descriptionError" class="notifyForUser" spanError></span> </div></td>
</tr>
<tr >
<td ><option value="2"> 2 </option>
</td>
<td> Role </td>
<form id="form2">
<td><label>
<input type="radio" name="role" value='learner' onClick=toggleContent('form2','div2') >
Learner </label>
</td>
<td><label>
<input type="radio" name="role" value='expert' onClick=toggleContent('form2','div2') >
Expert </label>
</td>
</form>
<td ><div ID="div2" align=right style="display:none;">
<label class="labell labelUser" >why?</label>
<textarea name="description" align="right" id="description" cols="40" rows="5" class="inputbox">Why?</textarea>
<span id="descriptionError" class="notifyForUser" spanError></span> </div></td>
</tr>
</table>
</body>
</html>
你可以这样做:
<script language="javascript">
function toggleContent(showHideDiv, switchTextDiv) {
var text = document.getElementById(showHideDiv);
var ele = document.getElementById(switchTextDiv);
var rad_val='';
var obj=text.getElementsByTagName("input");
for (var i=0; i < obj.length; i++)
{
if (obj[i].checked)
{
rad_val = obj[i].value;
}
}
if(rad_val.indexOf("learner")!=-1){
ele.style.display = "block";
}
else {
ele.style.display = "none";
}
}
</script>
您在代码的逻辑和检索表单元素的方式上存在一些错误。
与其修复你的代码,我建议修改整个逻辑。
更好的做法是通过代码绑定点击事件,而不是从每个输入标签内内联。此外,单击单选按钮(也是从使用键盘选择触发)后,您可以确定整个单选按钮组的选定值是单击按钮的值。
以下是实现相同效果所需的代码:
window.onload = function() {
var oDiv = document.getElementById("div2");
var arrRoleButtons = document.getElementsByName("role");
for (var i = 0; i < arrRoleButtons.length; i++) {
var oCurrentRole = arrRoleButtons[i];
oCurrentRole.onclick = function() {
oDiv.style.display = (this.value === 'learner') ? "block" : "none";
}
}
};
有了这个,你不再需要从标签中调用onclick
:
<input type="radio" name="role" value='learner' />
<input type="radio" name="role" value='expert' />
实时测试用例。
if(rad_val=='learner'){
ele.style.display = "block";
}
else {
ele.style.display = "none";
}
没有值等于学习者,而是学习者 1 或学习者 2
试试这个:
function toggleContent(showHideDiv, switchTextDiv) {
var text = document.getElementById(showHideDiv);
var ele = document.getElementById(switchTextDiv);
var rad_val = '';
var pattern = /'d+/g;
var a=pattern.exec(showHideDiv);
for (var i = 0; i < document.forms[showHideDiv].role.length; i++) {
if (document.forms[showHideDiv].role[i].checked) {
rad_val = document.forms[showHideDiv].role[i].value;
}
}
if (rad_val == 'learner' + a) {
ele.style.display = "block";
}
else {
ele.style.display = "none";
}
}
这是解决方案。感谢@dragon66解决我的问题。
function toggleContent(showHideDiv, switchTextDiv) {
var text = document.getElementById(showHideDiv);
var ele = document.getElementById(switchTextDiv);
var rad_val='';
for (var i=0; i < text.role.length; i++)
{
if (text.role[i].checked)
{
rad_val = text.role[i].value;
}
}
if(rad_val=='learner'){
ele.style.display = "block";
}
else {
ele.style.display = "none";
}
}
</script>
</head>
<body>
<table>
<tr >
<td ><option value="1"> 1 </option>
</td>
<td> Role </td>
<form id="form1">
<td><label>
<input type="radio" name="role" value='learner' onClick="toggleContent('form1','div1')" >
Learner </label>
</td>
<td><label>
<input type="radio" name="role" value='expert' onClick="toggleContent('form1','div1')" >
Expert </label>
</form>
<td ><div ID="div1" align=right style="display:none;">
<label class="labell labelUser" >why?</label>
<textarea name="description" align="right" id="description" cols="40" rows="5" class="inputbox">Why?</textarea>
<span id="descriptionError" class="notifyForUser" spanError></span> </div></td>
</tr>
<tr >
<td ><option value="2"> 2 </option>
</td>
<td> Role </td>
<form id="form2">
<td><label>
<input type="radio" name="role" value='learner' onClick=toggleContent('form2','div2') >
Learner </label>
</td>
<td><label>
<input type="radio" name="role" value='expert' onClick=toggleContent('form2','div2') >
Expert </label>
</td>
</form>
<td ><div ID="div2" align=right style="display:none;">
<label class="labell labelUser" >why?</label>
<textarea name="description" align="right" id="description" cols="40" rows="5" class="inputbox">Why?</textarea>
<span id="descriptionError" class="notifyForUser" spanError></span> </div></td>
</tr>
</table>
</body>
</html>
相关文章:
- Javascript:无法获取变量中的单选按钮值
- 用于选择MVC3中单选按钮值的JavaScript
- Javascript:图像与单选按钮的值不匹配
- 如何在Javascript中将单选按钮值保存到cookie中
- 注入Javascript以选择具有指定值的所有单选按钮
- Javascript:单选按钮,并显示基于vaule的图像
- Javascript:单击单选按钮时显示图像
- 在Javascript中选择Dynamicly Created单选按钮组并显示内部文本
- Spring WebFlow2 Javascript只在第一个单选按钮上工作
- 数据切换=“;按钮”;在JavaScript中无法识别引导程序单选按钮
- Rails-带有单选按钮的表单,带有启用/禁用附加元素的javascript操作
- JavaScript:如何用变量填充单选按钮值和标签
- Javascript/Jquery将选择列表更改为单选按钮
- 表单验证上的彩色单选按钮-Javascript
- 带有单选按钮 JavaScript 的随机测验
- 保存状态单选按钮javascript html
- 验证信用卡号码和选中的单选按钮javascript
- 选中单选按钮javascript时显示相关内容
- 单选按钮javascript验证
- 需要帮助检查验证的单选按钮JavaScript