Question

我的表格中有两个单选按钮，按照这两个单选按钮，我有另一个字段。如果只检查某个单选按钮，我想显示该字段。默认情况下，它应该被隐藏。

我的代码

付款方式

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

此处我只想在用户选中“预定付款”单选按钮时显示生效日期字段。我怎么能这样做？

Answer 1

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

http://jsfiddle.net/wdckktz7/

AngularJS代码

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

});

并将日期输入放在div中：

<div id="div">
    <label><h4><b>Effective Date*</b></h4></label>
    <input type="date" >
</div>

如果仅选中某个单选按钮，则显示一个字段

2 个答案: