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

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

1 个答案: