Question

我有2个单选按钮。但是当选择一个（check1）时，我想更改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>

感谢您的帮助！

Answer 1

当取消选择第一个无线电元素时，当前解决方案不会触发更改事件。请尝试这样做 - 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>

我猜你最终想要做的事情就像this jsFiddle。

$('input[name=type]').on('change', function(){
    if($(this).prop('value') == 1) {
      $('.amount').html('$99.99');
    }
    else {
      $('.amount').html('$249.99');
    }
});

Answer 2

使用此...

$('#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 Demo

Answer 3

我的回答：fiddle demo

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

然后在每次更改更新金额范围内。

的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); 
});

在无线电选择上更改跨度html

3 个答案: