Question

我正在设置一个包含多种付款方式的结帐表单。我希望价格可以根据所选的单选按钮而有所不同。我发现了几个jQuery示例，但是当用户选择一个单选按钮时没有任何反应。这是我的代码：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.2.6.min.js"></script>

<script>

$('input[name=payment]').change(function() {

    switch ($('input[name=payment]:checked').val()) {
    case 'skrill':
        $('#costLabel').text('13.99');      
        break;
    case 'paypal':
        $('#costLabel').text('14.99');
        break;
    default:
        $('#costLabel').text('select your choice');
    }
});

</script>


<form  name="myform" action="" method="post"  >
<br>Please choose Payment method and click on the Buy button: 
<br/>
<p>
<label><input id="skrill" type="radio" checked name="payment">Credit Card &nbsp;<img src="/images/creditcard.png"></label><br>
<label><input id="paypal" type="radio" name="payment">PayPal &nbsp; <img src="/images/paypal.png"></label><br>

</p>

<br/>
 <fieldset>
      <label id="costLabel" name="costLabel">Total price: </label>
 </fieldset>

</form>

预期的行动是更新＆＃34; costLabel＆＃34;选择收音机时知道可能出现什么问题吗？ Thans

Answer 1

单选按钮应具有值属性。例如：

<input id="skrill" value="skrill" type="radio" checked name="payment"> Credit Card

将#costLabel移到单独的范围内以保留Total price文字也是有意义的：

<label name="costLabel">Total price: <span id="costLabel"></span></label>

最后，您无需使用$('input[name=payment]:checked')重新选中已选中的单选按钮，因为在更改处理程序内部，您可以引用当前使用$(this)检查的单选按钮。

演示：http://jsfiddle.net/E9L75/

Answer 2

将您的脚本包含在内，

$(document).ready(function(e)
{
   // Place your script here
});

选择无线电时jQuery更改字段

2 个答案:

演示：http://jsfiddle.net/E9L75/