knockout.js 将数据从一个字段复制到另一个字段

3lxsmp7m 于 2022-11-10 发布在其他

关注(0)|答案(3)|浏览(189)

我是非常新的敲除JavaScript和Jquery，我正在建立一个新的形式，其中我有两个块一个为送货地址和一个为账单地址。我有复选框，如果万一账单地址是相同的送货，需要地址字段的数据复制到账单从送货地址字段

<div class="form-check">
   <input class="form-check-input position-static" type="checkbox" id="SameAsShippingAddress" value="SameAsShippingAddress" data-bind="checked: sameAsShippingAddress" />
   <label>Check this box if Shipping Address and Billing Address are the same.</label>
 </div>

 <div class="row">
     <div class="col-md-6">
        <h4>Shipping Address:</h4>
           <div class="form-group required">
             <label for="EmailCompetitor" class="control-label">Email:</label>
             <input type="email" maxlength="150" id="EmailCompetitor" name="EmailCompetitor" class="form-control" data-bind="value: emailCompetitor" required />
            </div>

            <div class="form-group required">
              <label for="FirstNameCompetitor" class="control-label">First Name:</label>
              <input type="text" maxlength="150" id="FirstNameCompetitor" name="FirstNameCompetitor" class="form-control" data-bind="value: firstNameCompetitor" required />
            </div>
    </div>

    <div class="col-md-6">
       <h4>Billing Address:</h4>
       <div class="form-group required">
           <label for="EmailCompetitor_Billing" class="control-label">Email:</label>
           <input type="email" maxlength="150" id="EmailCompetitor_Billing" name="EmailCompetitor_Billing" class="form-control" data-bind="value: emailCompetitor_Billing" required />
        </div>

        <div class="form-group required">
           <label for="FirstNameCompetitor_Billing" class="control-label">First Name:</label>
           <input type="text" maxlength="150" id="FirstNameCompetitor_Billing" name="FirstNameCompetitor_Billing" class="form-control" data-bind="value: firstNameCompetitor_Billing" required />
        </div>
    </div>

是否有一种简单的方法可以在单击复选框时将数据从送货地址字段Map到账单地址字段？

knockout.js

来源：https://stackoverflow.com/questions/64656612/copy-the-data-from-one-field-to-another-field

3条答案

按热度按时间

4ioopgfo1#

如果是，则将其发送到一个新的电子邮件地址。第一个问题是：}

赞(0）回复(0）举报 2022-11-10

2uluyalo2#

写复选框改变功能：

$('#SameAsShippingAddress').change(function () {
                if ($(this).is(':checked')) {
                    $("#EmailCompetitor_Billing").attr("value", $("#EmailCompetitor").val());
                } else {
                    //do sth
                }
            });

赞(0）回复(0）举报 2022-11-10

qv7cva1a3#

通常处理此问题的方法是使用更改功能并检查复选框是否已选中：

// Listen for when the object with ID SameAsShippingAddress  (input type:checkbox) changes
$("#SameAsShippingAddress").on("change", function (e) {
    // Is the checkbox checked?
    if(this.checked) {
        // If checked, put the shipping address information into the billing address information
        $("#EmailCompetitor_Billing").val($("#EmailCompetitor").val());
        $("#FirstNameCompetitor_Billing").val($("#FirstNameCompetitor").val());
    }
});

**注意：**您可以通过添加else语句来清除数据，这样整个代码看起来就像这样：

// Listen for when the object with ID SameAsShippingAddress (input type:checkbox) changes
$("#SameAsShippingAddress").on("change", function (e) {
    // Is the checkbox checked?
    if(this.checked) {
        // If checked, put the shipping address information into the billing address information
        $("#EmailCompetitor_Billing").val($("#EmailCompetitor").val());
        $("#FirstNameCompetitor_Billing").val($("#FirstNameCompetitor").val());
    } else {
      // (if not checked / unchecked) Remove billing information
      $("#EmailCompetitor_Billing").val(""));
      $("#FirstNameCompetitor_Billing").val("");
    }
});

......但这可能会导致用户体验不佳，因为用户可能已经填写了信息或在选中复选框后稍微编辑了送货地址信息。

赞(0）回复(0）举报 2022-11-10

我来回答

knockout.js 将数据从一个字段复制到另一个字段

3条答案

相关问题

热门标签

最新问答