隐藏使用JS循环显示多个表单字段

Question

I am working on a form which has over 10 text input fields at present and this number is expected to increase over time, each text field is linked with a checkbox, clicking the checkbox enables and disables the input field. This process is working fine but I wanted to improve the JS code. right now each checkbox has its own JS script and i was wondering if it is possible to somehow use JS loop to achieve the hide/show of fields rather than having individual scripts.

Since the HTML is pretty long so just to demonstrate i am copying two input fields here and their 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>

The JS that shows/hide the fields

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

I wanted to use the loop to achieve the hide/show of fields, I will really appreciate any help here

Answer 1

How about something like this:

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