代码之家 › 专栏 › 技术社区 › Sailing Judo

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

html jquery

Sailing Judo · 技术社区 · 16 年前

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

我的复选框如下:

<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 回复 | 直到 16 年前

tvanfosson 16 年前

你想用 val() 方法来获取和设置jquery对象的属性,而不是值属性。当您根据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('');
        }
    });
});

Vinay Sajip 16 年前

您应该使用****useAccountAddress,同样在代码中的其他地方使用来向jQuery指示您要对具有特定ID的元素进行操作。通常,“abc”表示选择具有ID的元素。 abc “.def”表示使用css类选择元素 def .

David Hedlund 16 年前

<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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

5 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

5 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

5 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

5 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

5 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

5 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

5 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

5 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

5 月前