我有两组单选按钮。一种是付款方式,另一种是金额。
如果付款方式为已付款,我想显示金额,如果是免费的,我不显示。我主要使用它,但是如果用户从付费切换为免费,则保留金额按钮。
如何隐藏它们,并将value设置为null?
$(function() {
$('#payment_type').change(function() {
var optionClass = $(this).val();
if (optionClass == "paid") {
$('#amount').show();
} else if (optionClass == "free") {
$('#amount').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="Session Type" class="col-lg-2 control-label">{{trans('Session Type')}}</label>
<div class="col-lg-10">
<label class="radio-inline">
<input type="radio" name="payment_type" value="free"
@if($onlineCounsellingApplication->payment_type == 'free')
checked
@endif class="payment_type_radio">
Free
</label>
<label class="radio-inline">
<input type="radio" name="payment_type" value="paid" id="payment_type"
@if($onlineCounsellingApplication->payment_type == 'paid')
checked
@endif class="payment_type_radio">
Paid
</label>
</div>
</div>
<div class="form-group">
<label for="amount" class="col-lg-2 control-label">{{trans('Amount')}}</label>
<div class="col-lg-10" id="amount" style="display:none">
<label class="radio-inline">
<input type="radio" name="amount" value="20"
@if($onlineCounsellingApplication->amount == '20')
checked
@endif class="amount_radio">
€20
</label>
<label class="radio-inline">
<input type="radio" name="amount" value="30"
@if($onlineCounsellingApplication->amount == '30')
checked
@endif class="amount_radio">
€30
</label>
</div>
</div>
答案 0 :(得分:2)
您需要收听payment_type
广播组,即,':radio[name=payment_type]'
到现在为止,您只收听单个广播的change
事件。即#payment_type
$(function () {
$(':radio[name=payment_type]').change(function () {
//Rest of your code
});
});
$(function() {
$(':radio[name=payment_type]').change(function() {
//Rest of your code
$('#amount').toggle(this.value == 'paid')
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="Session Type" class="col-lg-2 control-label">Session Type</label>
<div class="col-lg-10">
<label class="radio-inline">
<input type="radio" name="payment_type" value="free"/>
Free
</label>
<label class="radio-inline">
<input type="radio" name="payment_type" value="paid" />
Paid
</label>
</div>
</div>
<div class="form-group">
<label id="amount" class="col-lg-2 control-label">Amount</label>
</div>
答案 1 :(得分:0)
使用单选按钮的通用名称而不是id
作为选择器来将事件附加到两个单选按钮,然后使用jQuery .toggle()
方法切换显示。 / p>
注意::我建议使用conditional (ternary) operator
代替@if/@endif
,例如:
<input type="radio" name="payment_type" {{$onlineCounsellingApplication->payment_type=='free'?'checked':''}} value="free" class="payment_type_radio">
$(function() {
$('input:radio[name="payment_type"]').change(function() {
$('#amount').toggle($(this).val() === "paid");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="Session Type" class="col-lg-2 control-label">Session Type</label>
<div class="col-lg-10">
<label class="radio-inline">
<input type="radio" name="payment_type" value="free" checked class="payment_type_radio">Free</label>
<label class="radio-inline">
<input type="radio" name="payment_type" value="paid" id="payment_type" class="payment_type_radio">Paid</label>
</div>
</div>
<div class="form-group">
<label for="amount" class="col-lg-2 control-label"></label>
<div class="col-lg-10" id="amount" style="display:none">
<label class="radio-inline">
<input type="radio" name="amount" value="20" checked class="amount_radio">€20</label>
<label class="radio-inline">
<input type="radio" name="amount" value="30" class="amount_radio">€30</label>
</div>
</div>