Question

我有以下代码将输入的结算地址复制到送货地址表单：

当我单击复选框时，该值未传递到临时地址文本框

<form id="form" action="">
                            <section>
                                <div id="row">


                                    <h5 class="with-border">Permanent Address </h5>
                                    <div class="row">
                                        <div class="col-lg-4">
                                            <fieldset class="form-group">
                                                <label class="form-label semibold control-label">Address line 1</label>
                                                @Html.TextBoxFor(model => model.pharmaCompanyDivision.PAddress1, new { @class = "form-control", @id = "txtPAddress1", placeholder = "Address Line1" })
                                            </fieldset>
                                        </div>
                                        <div class="col-lg-4">
                                            <fieldset class="form-group">
                                                <label class="form-label semibold control-label">Address Line2</label>
                                                @Html.TextBoxFor(model => model.pharmaCompanyDivision.PAddress2, new { @class = "form-control", @id = "txtPAddress2", placeholder = "Address Line2" })
                                            </fieldset>

                                    </div><!--.row-->




                                    <div class="checkbox">
                                        <input type="checkbox" id="check-1">
                                        <label for="check-1">Billing Address is same as Shipping Address.</label>
                                    </div>

                                    <h5 class="with-border">Temporary Address </h5>
                                    <div class="row">
                                        <div class="col-lg-4">
                                            <fieldset class="form-group">
                                                <label class="form-label semibold control-label">Address line 1</label>
                                                @Html.TextBoxFor(model => model.pharmaCompanyDivision.TAddress1, new { @class = "form-control", @id = "txtTAddress1", placeholder = "Address Line1" })
                                            </fieldset>
                                        </div>
                                        <div class="col-lg-4">
                                            <fieldset class="form-group">
                                                <label class="form-label semibold control-label">Address Line2</label>
                                                @Html.TextBoxFor(model => model.pharmaCompanyDivision.TAddress2, new { @class = "form-control", @id = "txtTAddress2", placeholder = "Address Line2" })
                                            </fieldset>
                                        </div>

                                    </div><!--.row-->

                            </section>
                        </form>

脚本：

<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('input:checkbox[id*=check-1]').change(function () {
            if ($(this).is(':checked')) {
                $('input:text[id*=txtTAddress1]').val($('input:text[id*=txtPAddress1]').val());
                $('input:text[id*=txtTAddress2]').val($('input:text[id*=txtPAddress2]').val());
            }
            else {
                $('input:text[id*=txtTAddress1]').val('');
                $('input:text[id*=txtTAddress2]').val('');
            }
        });
    });


</script>

选中第一个图像复选框，确认未传递给文本框的值

我真的很感激任何帮助。

Answer 1

我使用简化版测试了这个并且它可以工作，所以我猜你的环境中有一些东西正在运行。也许输入的HTML没有按预期呈现，例如没有应用id，或者其他一些JS正在从DOM中删除这些输入并替换它们。如果发生这种情况，则jquery将使用DOM上不再存在的元素。这可能发生在DOM渲染JavaScript框架的工作，如Angular，React，Vue等......我希望这有帮助

以下是我用于测试的简化版本：

<!DOCTYPE html>
<html>
<body>

<div>
	<lable for="txtPAddress1">Address 1</lable>
	<input id="txtPAddress1" type="text">
</div>

<input id="check-1" type="checkbox">

<div>
	<lable for="txtTAddress1">Address 1</lable>
	<input id="txtTAddress1" type="text">
</div>

<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('input:checkbox[id*=check-1]').change(function () {
            if ($(this).is(':checked')) {
                $('input:text[id*=txtTAddress1]').val($('input:text[id*=txtPAddress1]').val());
                $('input:text[id*=txtTAddress2]').val($('input:text[id*=txtPAddress2]').val());
            }
            else {
                $('input:text[id*=txtTAddress1]').val('');
                $('input:text[id*=txtTAddress2]').val('');
            }
        });
    });
</script>
</body>
</html>

使用mvc将送货地址复制到帐单邮寄地址

1 个答案: