读书人

用checkbox模拟实现单选按钮并显示相

发布时间: 2012-02-20 21:18:24 作者: rapoo

用checkbox模拟实现单选按钮,并显示相应的值的问题。
比如有这样很多个checkbox,以三个为例:

<table>
<tr>
<td> <input type= "checkbox " name= "element1 " value= "1 "> </td> <td> 哥哥 </td>
</tr>
<tr>
<td> <input type= "checkbox " name= "element1 " value= "2 "> </td> <td> 姐姐 </td>
</tr>
<tr>
<td> <input type= "checkbox " name= "element1 " value= "3 "> </td> <td> 弟弟 </td>
</tr>
</table>
<input type= "text " id= "display " value= " ">

我用JS实现的效果是:
点击一个checkbox,把该checkbox所在行的第二列中的值显示在display中。
再点击另一个checkbox的时候,上一个选中的checkbox为取消状态(就是单选按钮的功能),然后在display中再显示相应的值。

客户这样的需求,望朋友们多多指点,不胜感激。

[解决办法]
<table>
<tr>
<td> <input type= "checkbox " name= "element1 " value= "1 " onclick= "f(this) "> </td> <td> 哥哥 </td>
</tr>
<tr>
<td> <input type= "checkbox " name= "element1 " value= "2 " onclick= "f(this) "> </td> <td> 姐姐 </td>
</tr>
<tr>
<td> <input type= "checkbox " name= "element1 " value= "3 " onclick= "f(this) "> </td> <td> 弟弟 </td>
</tr>
</table>
<input type= "text " id= "display " value= " ">

<script>

var f = function (obj){
for(var i=0;i < document.all( "element1 ").length;i++)
{
document.all( "element1 ")[i].checked = false;
}
obj.checked = true;
display.value = obj.parentNode.parentNode.childNodes(1).innerText;
}
</script>

读书人网 >JavaScript

热点推荐