顯示一個字段，如果只有某個單選按鈕被檢查

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 id="div"> 
    <label><h4><b>Effective Date*</b></h4></label> 
    <input type="date" > 
</div>