镜像单选按钮内容

Question

希望将选中的单选框内的值镜像到#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>

Answer 1

对于您怪异的用例，如果您希望执行以下操作

  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>