How to use a 'checkbox' to update present address to same as permanent address

问题

Often when creating a form on a web page, I need our customers to fill out a field such as a permanent address, as well as a present address( when checked check box then present address fill automatically). Instead of having our customers fill out the form twice,I can use JavaScript to copy the form's data from one field to another.

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

回答1:

You can try this,

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('');           
    }
}

It's not working then you can use setTimeout(function (){ },100)

回答2:

Add an id to your checkbox:

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

Use jQuery like below:

$(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('');           
    }
    });
});

And don't forget to include jQuery library in your view.

来源：https://stackoverflow.com/questions/48578321/how-to-use-a-checkbox-to-update-present-address-to-same-as-permanent-address