使用jQuery,如何通过单击复选框将输入值更改为另一个?

时间:2009-07-29 14:23:29

标签: jquery html

我正在尝试创建一个表单,用户可以单击一个复选框,并将其物理地址属性填充到其帐单邮寄地址属性中。

我的复选框如下所示:

<label for="UseAccountAddress">Use Account Address</label>
<input id="UseAccountAddress" type="checkbox" value="true" name="UseAccountAddress"/>

示例地址如下所示:

<input id="Street1" type="text" value="" name="Street1"/>
<input id="PrimaryAddressLine1" type="hidden" value="123 Hi Street" name="PrimaryAddressLine1"/>

我尝试将此jquery添加到我的表单中,该表单无效:

<script type="text/javascript">
    $().ready(function() {
        $("UseAccountAddress").click(function() {
            if ($(this).attr("checked")) {
                $("Street1").value = $("PrimaryAddressLine1").value;
                $("Street2").value = $("PrimaryAddressLine2").value;
                $("City").value = $("PrimaryCity").value;
                $("State").value = $("PrimaryStateID").value;
                $("PostalCode").value = $("PrimaryZip").value;
            }
            else {
                $("Street1").value = "";
                $("Street2").value = "";
                $("City").value = "";
                $("State").value = "";
                $("PostalCode").value = "";
            }
        });
    });
</script>

使用Firebug我可以看到上面的.click函数永远不会被击中。我猜我必须错误地引用复选框的ID,但我不确定它应该是什么。由于那是不正确的,那么我所指的if块中的元素的方式也可能不正确。

这是正确的语法吗?

3 个答案:

答案 0 :(得分:3)

您希望使用val()方法来获取和设置jQuery对象的属性,而不是value属性。您还需要更改选择器当您根据ID进行选择时,您需要使用井号/井号(#)对其进行限定。

$().ready(function() {
    $("#UseAccountAddress").click(function() {
        if ($(this).attr("checked")) {
            $("#Street1").val( $("#PrimaryAddressLine1").val() );
            $("#Street2").val( $("#PrimaryAddressLine2").val() );
            $("#City").val( $("#PrimaryCity").val() );
            $("#State").val( $("#PrimaryStateID").val() );
            $("#PostalCode").val( $("#PrimaryZip").val() );
        }
        else {
            $("#Street1").val('');
            $("#Street2").val('');
            $("#City").val('');
            $("#State").val('');
            $("#PostalCode").val('');
        }
    });
});

答案 1 :(得分:2)

您应该使用**#** UseAccountAddress,同样在代码中使用#where来向JQuery指示您要对具有特定ID的元素进行操作。通常“#abc”表示选择ID为abc的元素,“。def”表示选择CSS类def的元素。

答案 2 :(得分:1)

<script type="text/javascript">
$(document).ready(function() {
    $("#UseAccountAddress").click(function() {
        if ($(this).is(":checked")) {
            $("#Street1").val($("#PrimaryAddressLine1").val());
            $("#Street2").val($("#PrimaryAddressLine2").val());
            $("#City").val($("#PrimaryCity").val());
            $("#State").val($("#PrimaryStateID").val());
            $("#PostalCode").val($("#PrimaryZip").val());
        } else {
            $("#Street1, #Street2, #City, #State, #PostalCode").val('');
        }
    });
});
</script>