Reputation: 7105
i have two radio buttons used in my form and follow to those two radio buttons i have another field. I want to show that field if only a certain radio button is checked.otherwise by default it should be hidden.
My code
Payment Type
<div class="list">
<label class="item item-radio">
<input type="radio" name="group">
<div class="item-content">
Immediate Payment
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group">
<div class="item-content">
Scheduled Payment
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</div>
<label><h4><b>Effective Date*</b></h4></label>
<input type="date" >
Here i want to show effective date field only if the user checks the Scheduled Payment radio button. How can i do this?
Upvotes: 1
Views: 1808
Reputation: 1750
$("input[name=group]").change(function () {
if ($(this).val() == 'scheduled' && $(this).is(":checked")) {
$("#effectiveWrapper").show();
} else {
$("#effectiveWrapper").hide();
}
});
AngularJS Code
<div ng-show="payment == 'scheduled'">
<label>
<h4><b>Effective Date*</b></h4>
</label>
<input type="date" />
</div>
Upvotes: 3
Reputation: 8584
$("input:radio[name='group']").click(function() {
var value = $(this).val();
if (value == 'Scheduled Payment'){
$("#div").show();
}
else {
$("#div").hide();
}
});
and put your date input inside the div:
<div id="div">
<label><h4><b>Effective Date*</b></h4></label>
<input type="date" >
</div>
Upvotes: 1