基於收音機輸入選擇更新總價

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>