Laravel框架下Jquery勾选框切换恢复输入框原值方法咨询

嘿，作为jQuery新手能想到处理勾选切换的逻辑已经很不错啦！针对你Laravel项目里的这个需求，我们可以根据实际场景选择不同的实现方式，下面给你详细拆解：

场景1：恢复页面加载时的原始账单地址值 #

如果希望取消勾选时，收货地址回到页面刚加载时的账单地址初始值（比如用户未修改过账单地址的情况），可以提前把初始值存起来：

步骤1：保存原始值 #

在页面加载完成后，用一个变量存储收货地址输入框的初始值（也就是账单地址的初始值）：

// 页面加载完成后执行
$(document).ready(function() {
    // 存储原始账单地址值
    let originalBillingValues = {
        fname: $('#fname').val(),
        lname: $('#lname').val(),
        shipping_company: $('#shipping_company').val()
    };

    // 处理勾选框切换事件
    $(document).on('change', '#ship_to_different_address', function() {
        if(this.checked) {
            // 勾选时清空收货地址
            $("#fname").val("");
            $("#lname").val("");
            $('#shipping_company').val("");
        } else {
            // 取消勾选时恢复原始值
            $("#fname").val(originalBillingValues.fname);
            $("#lname").val(originalBillingValues.lname);
            $('#shipping_company').val(originalBillingValues.shipping_company);
        }
    });
});

场景2：同步当前最新的账单地址值 #

如果用户可能在填写过程中修改了账单地址，希望取消勾选时收货地址同步最新的账单地址值（更符合实际业务场景），可以直接从账单地址输入框取当前值赋值：

假设你的账单地址输入框ID分别是#billing_fname、#billing_lname、#billing_company，代码可以这么写：

$(document).on('change', '#ship_to_different_address', function() {
    if(this.checked) {
        // 勾选时清空收货地址
        $("#fname").val("");
        $("#lname").val("");
        $('#shipping_company').val("");
    } else {
        // 取消勾选时同步最新账单地址值
        $("#fname").val($("#billing_fname").val());
        $("#lname").val($("#billing_lname").val());
        $('#shipping_company').val($('#billing_company').val());
    }
});

优化技巧：批量处理输入框 #

如果后续要添加更多收货地址字段，可以给所有收货地址输入框加一个统一的类（比如.shipping-input），这样不用逐个写ID，代码更简洁：

$(document).ready(function() {
    let originalBillingValues = {};
    // 批量存储原始值
    $('.shipping-input').each(function() {
        originalBillingValues[$(this).attr('id')] = $(this).val();
    });

    $(document).on('change', '#ship_to_different_address', function() {
        if(this.checked) {
            $('.shipping-input').val('');
        } else {
            // 批量恢复原始值
            $('.shipping-input').each(function() {
                $(this).val(originalBillingValues[$(this).attr('id')]);
            });
        }
    });
});

这样无论后续加多少字段，只需要给新输入框加上.shipping-input类就可以啦！

内容的提问来源于stack exchange，提问作者Hassaan Ali