html - "Billing address same as shipping address"jQuery 脚本 : is there a better way to do this?

Question

我正在为 friend 的自行车 express 服务创建一个 php 联系表。基本上，当检查“运输和计费地址相同”框时，我希望每个关键事件之后两组字段都同步。

表格非常简单:

<!-- Get the shipping address inputs -->
<input type="text" name="company_address1" value="" id="company_address1">
<input type="text" name="company_city" value="" id="company_city">

<!-- Get the billing address inputs -->
<p>Same as above <input type="checkbox" name="dupe" id="dupe" value=""></p>
<input type="text" name="billing_address1" value="" id="billing_address1">
<input type="text" name="billing_city" value="" id="billing_city">

jQuery

$("input#dupe").click(function(){ 
if ($("input#dupe").is(':checked')) 
{ 
    // Checked, copy values 
    $("input#billing_address1").val($("input#company_address1").val()); 
    $("input#billing_city").val($("input#company_city").val()); 
} 
else 
{ 
    // Clear on uncheck 
    $("input#billing_address1").val(""); 
    $("input#billing_city").val(""); 
} 
});
$("input#company_address1").keyup(function(event) {
if ($("input#dupe").is(':checked')) {
    var stt=$(this).val();
    $("input#billing_address1").val(stt);
}
});
$("input#company_city").keyup(function(event) {
if ($("input#dupe").is(':checked')) {
    var stt=$(this).val();
    $("input#billing_city").val(stt);                           
}
});
$("input#billing_address1").keyup(function(event) {
if ($("input#dupe").is(':checked')) {
    var stt=$(this).val();
    $("input#company_address1").val(stt);
}
});
    $("input#billing_city").keyup(function(event) {
if ($("input#dupe").is(':checked')) {
    var stt=$(this).val();
    $("input#company_city").val(stt);                           
}
});

优化不是我的强项之一，有什么方法可以将事件链接在一起吗？

Answer 1

您可以让 jQuery 在勾选复选框时简单地禁用第二组字段，然后在提交表单时查看服务器端复选框的值。

如果您想保留现有的设计，可能会考虑为输入表单中的所有字段编写一个 keyup() 函数；提取触发函数的元素的 id；稍微编辑一下 id(将“billing”替换为“company”等)，然后执行 $("...").val () 位操作。