單擊複選框時，填寫其他文本框中的多個文本框值時遇到問題

Question

我搜索了DID，但找不到任何幫助我找出特定問題的內容。我有一個客戶地址的文本框，一個商務地址的文本框，以及一個用於標記地址是否相同的複選框。我需要使用複選框填寫客戶地址onclick的商戶地址，並在onclick上填寫它們。我試過用jQuery和直接的javascript DOM操作來使用幾種不同的方式，我得到的最成功的是在下面的代碼中，它只填充了具有cust_street值的biz_street文本框，但我不明白爲什麼。一些幫助將不勝感激，無論是在jQuery或直的JavaScript，不能使用PHP（可悲）。

這是對的jsfiddle（由rjmunro，好主意:)作爲建議）：不是在所有

在這裏工作http://jsfiddle.net/yN73w/1/是jQuery的：

$("#same_box").click(function() { 
var v = $("#cust_street").val(); 
var x = $("#cust_city").val(); 
var y = $("#cust_state").val(); 
var z = $("#cust_zip").val(); 

$("#biz_street").val(v); 
$("#biz_city").val(x); 
$("#biz_state").val(y); 
$("#biz_zip").val(z); 
}); 

或者更簡單地說：

$("#same_box").click(function() { 
$("#biz_street").val($("#cust_street").val()); 
$("#biz_city").val($("#cust_city").val()); 
$("#biz_state").val($("#cust_state").val()); 
$("#biz_zip").val($("#cust_zip").val()); 
}); 

而HTML：

<label id="cus_street_label">Street</label></br> 
    <input type="text" name="cust_street" id="cust_street" style="width:90%" /></br> 

<div id="cus_city"> 
    <label id="cus_city_label">City</label></br> 
    <input type="text" name="cust_city" id="cust_city" style="width:100%" /></br> 
</div> 
<div id="cus_state"> 
    <label id="cus_state_label">State</label></br> 
    <input type="text" name="cust_state" id="cust_state" style="width:70%" /></br> 
</div> 
<div id="cus_zip"> 
    <label id="cus_zip_label">Zip</label></br> 
    <input type="text" name="cust_zip" id="cust_zip" style="width:65%" /></br> 
</div> 

    <input type="checkbox" name="same_box" id="same_box" >Address Same as Customer</input></br> 

<label id="biz_street_label">Street</label></br> 
<input type="text" name="biz_street" id="biz_street" style="width:90%" /></br> 

<div id="biz_city"> 
    <label id="biz_city_label">City</label></br> 
    <input type="text" name="biz_city_box" id="biz_city_box" style="width:100%" /></br> 
</div> 
<div id="biz_state"> 
    <label id="biz_state_label">State</label></br> 
    <input type="text" name="biz_state_box" id="biz_state_box" style="width:70%" /></br> 
</div> 
<div id="biz_zip"> 
    <label id="biz_zip_label">Zip</label></br> 
    <input type="text" name="biz_zip_box" id="biz_zip_box" style="width:80%" /></br> 
</div> 

非常感謝您的幫助，如果我在搜索中錯過了這樣的話題，我很抱歉。

（此外，不相關的，但爲什麼在Firefox不function formReset() { document.getElementById("customer").reset(); }工作？它似乎只在鉻工作）

Answer 1

（你需要在你的jsfiddle選擇jQuery的，像http://jsfiddle.net/7HGNx/）

您的代碼指的是biz_city，但元素的ID是biz_cty_box。

您可能不想附加點擊，您可能想要聽取更改事件，因爲在沒有鼠標的情況下更改選項時會觸發此事件。我還會檢查變化是否在勾選框，而不是取消勾選框。

$("#same_box").change(function (e) { 
    if ($(this).is(":checked")) { 
     . 
     . 
     . 
    } 
}