单击“复选框”时,无法从其他文本框填充多个文本框值

时间:2013-02-24 22:25:53

标签: javascript jquery html

我进行搜索,但找不到任何帮助我弄清楚我的特定问题的内容。我有一个客户地址的文本框,一个商业地址的文本框,以及一个复选框,用于标记地址是否应该相同。我需要让Checkbox用客户地址填写商家地址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>

非常感谢您的帮助,如果我在搜索中错过了这样的话题,我深表歉意。

(另外,不相关,但为什么function formReset() { document.getElementById("customer").reset(); }在Firefox中不起作用?它似乎只能用于chrome)

1 个答案:

答案 0 :(得分:0)

(你需要在你的JSFiddle中选择jQuery,比如http://jsfiddle.net/7HGNx/

您的代码指的是biz_city,但元素的ID是biz_cty_box

您可能不希望附加到单击,您可能希望收听更改事件,因为在没有鼠标的情况下更改选项时会触发。我还会检查一下这个改变是否在框中,而不是勾选方框。

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