隱藏使用JS循環顯示多個表單字段

Question

我正在處理一個表單，它現在有超過10個文本輸入字段，並且該數字預計會隨着時間的推移而增加，每個文本字段都與複選框關聯，單擊複選框啓用和禁用輸入字段。這個過程工作正常，但我想改善JS代碼。現在每個複選框都有自己的JS腳本，我想知道是否有可能以某種方式使用JS循環來實現隱藏/顯示字段而不是單獨的腳本。

由於HTML是很長，所以只是爲了證明我在這裏複製兩個輸入字段及其JS

<div class="control-group no_bottom_margin"> 
    <label class="control-label checkbox goal_label_text" for="holiday_travel_timeframe"><input 
      style="margin-top: 10px" type="checkbox" class="input-small" id="holiday_travel" 
      name="holiday_travel" value=""><img style="" 
               src="assets/img/goal_holiday.jpg"><?php _e('Holiday or travel'); ?> 
    </label> 

    <div class="controls" id="holiday_travel_timeframe" style="padding-top: 5px; display: none"> 
     <select name="holiday_travel_timeframe" class="input-medium pull-right"> 
      <option value="now">Now</option> 
      <option value="6_months">6 Months</option> 
      <option value="1_year">1 Year</option> 
      <option value="2_years">2 Years</option> 
      <option value="3_years">3 Years</option> 
      <option value="4_years">4 Years</option> 
      <option value="5_years">5 Years</option> 
      <option value="10_years">10 Years</option> 
      <option value="15_years">15 Years</option> 
     </select> 
    </div> 
</div> 
<div class="control-group no_bottom_margin"> 
    <label class="control-label checkbox goal_label_text" for="house_deposit_timeframe"><input 
      style="margin-top: 10px" type="checkbox" class="input-small" id="house_deposit" 
      name="house_deposit" value=""><img style="" 
               src="assets/img/goal_house.jpg"><?php _e('House deposit'); ?> 
    </label> 

    <div class="controls" id="house_deposit_timeframe" style="padding-top: 5px"> 
     <select name="house_deposit_timeframe" class="input-medium pull-right"> 
      <option value="now">Now</option> 
      <option value="6_months">6 Months</option> 
      <option value="1_year">1 Year</option> 
      <option value="2_years">2 Years</option> 
      <option value="3_years">3 Years</option> 
      <option value="4_years">4 Years</option> 
      <option value="5_years">5 Years</option> 
      <option value="10_years">10 Years</option> 
      <option value="15_years">15 Years</option> 
     </select> 
    </div> 
</div> 

，顯示JS /隱藏字段

$(document).ready(function() { 
    $("#holiday_travel").change(function() { 
     $("#holiday_travel_timeframe")[$(this).is(":checked") ? 'show' : 'hide']("fast") 
    }).change(); 

    $("#house_deposit").change(function() { 
     $("#house_deposit_timeframe")[$(this).is(":checked") ? 'show' : 'hide']("fast") 
    }).change(); 
}); 

我想用爲了實現隱藏/顯示領域的循環，我將非常感謝這裏的任何幫助

Answer 1

這樣的事情如何：

$(document).ready(function() { 
    $(".control-label input:checkbox").change(function() { 
     $(this).closest(".control-group").find(".controls")[$(this).is(":checked") ? 'show' : 'hide']("fast") 
    }).change(); 
});