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