show a field if only a certain radio button is checked

Question

show a field if only a certain radio button is checked

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?

javascript
html5
angularjs
ionic-framework

Answer 1

$("input[name=group]").change(function () {
    if ($(this).val() == 'scheduled' && $(this).is(":checked")) {
        $("#effectiveWrapper").show();
    } else {
        $("#effectiveWrapper").hide();
    }
});

http://jsfiddle.net/wdckktz7/

AngularJS Code

<div ng-show="payment == 'scheduled'">
    <label>
         <h4><b>Effective Date*</b></h4>

    </label>
    <input type="date" />
</div>

http://jsfiddle.net/orr1p1eg/

Answer 2

$("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>