Обновить итоговую цену на основе выбора радиоввода

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>