javascript - 镜像单选按钮内容
问题描述
希望将选中的单选框内的值镜像到#result(红色框)中。
你知道我该怎么做吗?
<div style="display: block;" id="block1">
<table cellpadding="0" cellspacing="0" class="orderopt">
<tr>
<td class="orderopt-td1">
<input type="radio" name="7x5" value="book>book 7x5 in. $1.00 " />
</td>
<td class="orderopt-td2">
book cover 7x5 in. </td>
<td class="orderopt-td3">$1.00</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="orderopt">
<tr>
<td class="orderopt-td1">
<input type="radio" name="10x7" value="book>book 10x7 in. $2.00 " />
</td>
<td class="orderopt-td2">
book cover 10x7 in. </td>
<td class="orderopt-td3">$2.00</td>
</tr>
</table>
<div id="result" style="width: 200px; border:1px solid red;height: 30px;">result here </div>
解决方案
对于您奇怪的用例,如果您想要以下内容将起作用
function handle7x5(){
ele = document.getElementById("result");
ele.innerHTML = document.getElementsByName('7x5')[0].value;
}
function handle10x7(){
ele = document.getElementById("result");
ele.innerHTML = document.getElementsByName('10x7')[0].value;
}
<div style="display: block;" id="block1">
<table cellpadding="0" cellspacing="0" class="orderopt">
<tr>
<td class="orderopt-td1">
<input type="radio" name="7x5" value="book>book 7x5 in. $1.00 " onchange="handle7x5();"/>
</td>
<td class="orderopt-td2">
book cover 7x5 in. </td>
<td class="orderopt-td3">$1.00</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="orderopt">
<tr>
<td class="orderopt-td1">
<input type="radio" name="10x7" value="book>book 10x7 in. $2.00 " onchange="handle10x7();" />
</td>
<td class="orderopt-td2">
book cover 10x7 in. </td>
<td class="orderopt-td3">$2.00</td>
</tr>
</table>
<div id="result" style="width: 200px; border:1px solid red;height: 30px;">result here </div>
推荐阅读
- javascript - JavaScript 的 trimLeft() 与 trimStart() 的区别
- c# - 验证包含开始和结束标签的文本
- html - 如何将边框的某个部分保持在子 div 的内容之上?
- java - 在获得价值 vikas 的标题后,如何根据他们的评级对 firebase 数据进行排序?
- javascript - Ubikloadpack jmeter 插件未附加显示错误命令如下:
- node.js - 将 HighChart 3D 饼图导出为 png 不起作用
- python - 哪个更快 - 条件字符串格式或常规 if/else?
- swift - 如何添加封面图片
- google-cloud-functions - 如何强制终止云功能?
- angular - Angular - 为生产构建 Angular 项目时出错