Question

我有一个带有8个无线电输入按钮的表格，我想根据用户的无线电输入选择更新总价格。如何通过jQuery实现这一目标？

<table>
  <tr>
    <td></td>
    <form name="m" action="" method="post">
      <th> <input id="test" name="purchaseChoice" class="radio" onclick="togglePrices(false);" type="radio" value="P2"/>
        <label for="purchaseChoice">£5</span> </label>
        <input id="test" name="purchaseChoice" class="radio" onclick="togglePrices(true);" type="radio" value="P1"/>
        <label for="purchaseChoice">£10</label>
      </th>
      <th class=""> <input id="test" name="purchaseChoice" class="radio" onclick="togglePrices(true);" type="radio" value="S111"/>
        <label for="purchaseChoice">£20</label>
        <input id="test" name="purchaseChoice" class="radio" onclick="togglePrices(false);" type="radio" value="S112"/>
        <label for="purchaseChoice">£30</label>
      </th>
      <th class=""> <input id="test" name="purchaseChoice" class="radio" onclick="togglePrices(true);" type="radio" value="S131"/>
        <label for="purchaseChoice">£40</label>
        <input id="test" name="purchaseChoice" class="radio" onclick="togglePrices(false);" type="radio" value="S132"/>
        <label for="purchaseChoice">£50</label>
      </th>
      <th class="highlight"> <input id="test" name="purchaseChoice" class="radio" onclick="togglePrices(true);" type="radio" value="S121"/>
        <label for="purchaseChoice">£60</label>
        <input id="test" name="purchaseChoice" class="radio" onclick="togglePrices(false);" type="radio" value="S122"/>
        <label for="purchaseChoice">£70</label>
      </th>
    </form>
  </tr>
  <tr>
    <th class="total">TOTAL YOU PAY</th>
    <th> 
     <div class="Priceband"></div>
    </th>
  </tr>
</table>

由于

Answer 1

您应该使用onselectionchanged事件来调用更新总金额的相应函数。你可以看看下面的链接 http://www.phpbuilder.com/board/archive/index.php/t-10307334.html

Answer 2

如果我正确理解您的要求，那么您只需更新选择更新价格。

请找到以下代码。可能对你有帮助。

<table>
  <tr>
    <td></td>
    <form name="m" action="" method="post">
      <th> <input id="test" name="purchaseChoice" class="radio" onclick="togglePrices(this);" type="radio" value="P2"/>
        <label for="purchaseChoice">£5</span> </label>
        <input id="test" name="purchaseChoice" class="radio" onclick="togglePrices(this);" type="radio" value="P1"/>
        <label for="purchaseChoice">£10</label>
      </th>
      <th class=""> <input id="test" name="purchaseChoice" class="radio" onclick="togglePrices(this);" type="radio" value="S111"/>
        <label for="purchaseChoice">£20</label>
        <input id="test" name="purchaseChoice" class="radio" onclick="togglePrices(this);" type="radio" value="S112"/>
        <label for="purchaseChoice">£30</label>
      </th>
      <th class=""> <input id="test" name="purchaseChoice" class="radio" onclick="togglePrices(this);" type="radio" value="S131"/>
        <label for="purchaseChoice">£40</label>
        <input id="test" name="purchaseChoice" class="radio" onclick="togglePrices(this);" type="radio" value="S132"/>
        <label for="purchaseChoice">£50</label>
      </th>
      <th class="highlight"> <input id="test" name="purchaseChoice" class="radio" onclick="return togglePrices(this);" type="radio" value="S121"/>
        <label for="purchaseChoice">£60</label>
        <input id="test" name="purchaseChoice" class="radio" onclick="togglePrices(this);" type="radio" value="S122"/>
        <label for="purchaseChoice">£70</label>
      </th>
    </form>
  </tr>
  <tr>
    <th class="total">TOTAL YOU PAY</th>
    <th> 
     <div class="Priceband"></div>
    </th>
  </tr>
</table>
<script language="javascript" type="text/javascript" >

    function togglePrices(e) {
        var price = $(e).val();
        $(".Priceband").html(price);
    }

</script>

根据无线电输入选择更新总价

2 个答案: