0

我有 2 个单选按钮。But when the one (check1) is selected, i'd like to change the span.amount html. 我该怎么做呢？

<input type="radio" class="radio-check" name="type" id="check1" value="0" checked />
<label for="check1">$99.99</label>
<input type="radio" class="radio-check" name="type" id="check2" value="1" />
<label for="check2">None</label>

$('#check1').change(function(){
    $('amount').html('$99.99'));
});

<button class="btn" type="submit">Pay <span id="amount" class="amount">$249.99</span></button>

谢谢您的帮助！

4

3 回答 3

2

当前的解决方案在取消选择第一个单选元素时不会触发更改事件。试试这个 - jsFiddle here。

jQuery：

$('input[name=type]').on('change', function(){
    $('.amount').html('$99.99');
});

HTML：

<input type="radio" class="radio-check" name="type" id="check1" value="0" checked />
<label for="check1">$99.99</label>
<input type="radio" class="radio-check" name="type" id="check2" value="1" />
<label for="check2">None</label>

<button class="btn" type="submit">Pay <span class="amount">$249.99</span></button>

我猜你最终想要做的是这样的 jsFiddle。

$('input[name=type]').on('change', function(){
    if($(this).prop('value') == 1) {
      $('.amount').html('$99.99');
    }
    else {
      $('.amount').html('$249.99');
    }
});
于 2013-04-17T21:27:55.420 回答
1

用这个...

$('#check1').on('change', function(){
    $('.amount').html('$99.99');
});

 <input type="radio" class="radio-check" name="type" id="check1" value="0" checked />
<label for="check1">$99.99</label>
<input type="radio" class="radio-check" name="type" id="check2" value="1" />
<label for="check2">None</label>

<button class="btn" type="submit">Pay <span class="amount">$249.99</span></button>

看到这个jsFiddle 演示

于 2013-04-17T21:20:33.233 回答
0

我的答案：小提琴演示

在身体负载上加载第一个标签。

然后在每个变化更新量跨度。

CSS：

.amount
{
    background-color: lightblue;
    padding:5px;
    margin:10px;
}

html:

<input type="radio" class="radio-check" name="type" id="check1" value="0" checked />
<label for="check1">$99.99</label>
<input type="radio" class="radio-check" name="type" id="check1" value="1" />
<label for="check2">None</label>
<br /><br />
<span class='amount'>here</span>

脚本：

var load_val = $('.radio-check:checked').next('label').text();
$('.amount').text(load_val);
$('.radio-check').change(function() { 
load_val = $(this).next('label').text();
$('.amount').text(load_val); 
});
于 2013-04-17T21:32:23.967 回答