如何使用“复选框”将当前地址更新为与永久地址相同答案

【问题标题】：How to use a 'checkbox' to update present address to same as permanent address如何使用“复选框”将当前地址更新为与永久地址相同
【发布时间】：2018-07-12 16:44:05
【问题描述】：

通常在网页上创建表单时，我需要我们的客户填写一个字段，例如永久地址以及当前地址（选中复选框然后自动填写当前地址）。我可以使用 JavaScript 将表单的数据从一个字段复制到另一个字段，而不是让我们的客户填写表单两次。

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()  

<div>


<div class="well">
                    <b>Parmanent Address </b>
                </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="col-lg-12">
                                    @Html.LabelFor(model => model.ParFirstAddr, htmlAttributes: new { @class = "control-label " })
                                    @Html.EditorFor(model => model.ParFirstAddr, new { htmlAttributes = new {@class = "form-control", autocomplete = "off", @placeholder = "Enter Address" } })
                                </div>
                            </div>
                        </div>                
                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="col-md-12">
                                    @Html.LabelFor(model => model.ParFirstPO, htmlAttributes: new { @class = "control-label " })
                                    @Html.EditorFor(model => model.ParFirstPO, new { htmlAttributes = new { @class = "form-control", autocomplete = "off", @placeholder = "Enter P.O." } })
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="col-md-12">
                                    @Html.LabelFor(model => model.ParFirstPS, htmlAttributes: new { @class = "control-label " })
                                    @Html.EditorFor(model => model.ParFirstPS, new { htmlAttributes = new { @class = "form-control", autocomplete = "off", @placeholder = "Enter P.S." } })
                                </div>
                            </div>
                        </div>
                    </div>

    <br />
                    <div class="well">
                        <b>Present Address </b>
                    </div>

                    <input type="checkbox" name="filladdress" onclick="fillAddress()" /> Present address same as parmanent address.<br />

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="col-lg-12">
                                    @Html.LabelFor(model => model.PreFirstAddr, htmlAttributes: new { @class = "control-label " })
                                    @Html.EditorFor(model => model.PreFirstAddr, new { htmlAttributes = new {@id= "PreFirstAddr", @class = "form-control", autocomplete = "off", @placeholder = "Enter Address", style = "width: 5000px" } })
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="col-md-12">
                                    @Html.LabelFor(model => model.PreFirstPO, htmlAttributes: new { @class = "control-label " })
                                    @Html.EditorFor(model => model.PreFirstPO, new { htmlAttributes = new { @class = "form-control", autocomplete = "off", @placeholder = "Enter P.O." } })
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="col-md-12">
                                    @Html.LabelFor(model => model.PreFirstPS, htmlAttributes: new { @class = "control-label " })
                                    @Html.EditorFor(model => model.PreFirstPS, new { htmlAttributes = new { @class = "form-control", autocomplete = "off", @placeholder = "Enter P.S." } })
                                </div>
                            </div>
                        </div>
                    </div>
            <div class="form-group">
                        <div class="col-md-offset-5 col-md-12">
                            <input type="submit" value="Submit" class="btn btn-success" />
                        </div>
                    </div>
     </div>

}

<script>
function fillAddress()
    {
        if (filladdress.checked == true)
        {
            var addr = document.getElementById("ParFirstAddr").value;
            var addrpo = document.getElementById("ParFirstPO").value;
            var addrps = document.getElementById("ParFirstPS").value;       

           
            var copyaddr = addr;
            var copyaddrpo = addrpo;
            var copyaddrps = addrps;
            
            document.getElementById("PreFirstAddr").value = copyaddr;
            document.getElementById("PreFirstPO").value = copyaddrpo;
            document.getElementById("PreFirstPS").value = copyaddrps;
        }
        else if (filladdress.checked == false)
        {
            document.getElementById("PreFirstAddr").value = '';
            document.getElementById("PreFirstPO").value = '';
            document.getElementById("PreFirstPS").value = '';
        }
    }
</script>

【问题讨论】：

这里有什么问题？

标签： javascript jquery razor asp.net-mvc-5

【解决方案1】：

在您的复选框中添加一个 id：

<input type="checkbox" id="filladdress" name="filladdress"/>

像下面这样使用 jQuery：

$(document).ready(function(){
    $("#filladdress").on("click", function(){
         if (this.checked) { 
                $("#PreFirstAddr").val($("#ParFirstAddr").val());
                $("#PreFirstPO").val($("#ParFirstPO").val());
                $("#PreFirstPS").val($("#ParFirstPS").val());                         
    }
    else {
        $("#PreFirstAddr").val('');
        $("#PreFirstPO").val('');
        $("#PreFirstPS").val('');           
    }
    });
});

别忘了在你的视图中包含 jQuery 库。

【讨论】：

谢谢。这个答案很有用。

【解决方案2】：

你可以试试这个，

function fillAddress(){
    if ($(this).attr('checked')) { 
                $("#PreFirstAddr").val($("#ParFirstAddr").val());
                $("#PreFirstPO").val($("#ParFirstPO").val());
                $("#PreFirstPS").val($("#ParFirstPS").val());                         
    }
    else {
        $("#PreFirstAddr").val('');
        $("#PreFirstPO").val('');
        $("#PreFirstPS").val('');           
    }
}

它不起作用然后你可以使用setTimeout(function (){ },100)

【讨论】：