Question

我是Jquery的新手，我一直在制作结帐表格。我已经勾选了“发货地址与账单地址不同？”复选框，选中复选框后，使用以下代码将字段设置为空。

$(document).on('change', '#ship_to_different_address', function() {
    if(this.checked) {
        $("#fname").val("");
        $("#lname").val("");
        $('#shipping_company').val("");

        this.checked = true;
    }else{

       //What to write here to fetch old values?

    }
});

我正在使用Laravel框架。请指导。

Answer 1

我假设您尝试使用复选框在清除表单和从清除之前还原值之间切换。

如果您希望能够获取旧值，则需要在清除之前将它们存储在某处。在这里，我将它们存储在每个输入元素的数据属性中，例如：

$(document).on('change', '#ship_to_different_address', function() {
  // Since we're doing the same thing to all three elements, let's make an array loop:
  for (var theId of ['#fname', '#lname', '#shipping_company']) {
    var thisEl = $(theId);
    if (this.checked) {
      thisEl.data("oldval", thisEl.val()) // stash the current value
            .val(""); // clear it
    } else {
      thisEl.val(thisEl.data("oldval")) // retrieve the stash
            .data("oldval",""); // clear the stash
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Fill these:<br>
<input id="fname"><br>
<input id="lname"><br>
<input id="shipping_company"><br> 
Then toggle this:
<input type="checkbox" id="ship_to_different_address">

Answer 2

如果您正在制作结帐表单，我认为您需要发货和结算地址......

因此，如果用户选择 送货地址与帐单地址不同 ，则需要一个送货地址块，其中相同的值填写在帐单邮寄地址，如果不是只清空这些字段

$(".radio").on("change", function() {
  if ($(this).val() === "1") {
    $("#s_fname").val($("#b_fname").val()).prop("disabled", true);
    $("#s_lname").val($("#b_lname").val()).prop("disabled", true);
    $("#shipping_company").val($("#billing_company").val()).prop("disabled", true);
  } else {
    $("#s_fname").val("").prop("disabled", false);
    $("#s_lname").val("").prop("disabled", false);
    $("#shipping_company").val("").prop("disabled", false);
  }
})

body {
  font: 13px Verdana;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Billing address</h4>
<input type="text" id="b_fname" placeholder="First Name" />
<input type="text" id="b_lname" placeholder="Last Name" />
<input type="text" id="billing_company" placeholder="Company Name" />
<br>
<div style="margin-top:30px;">
  <label><b>Shipping address different from billing address?</b></label>
  <label><input type="radio" name="radio1" value="1" class="radio"/>Yes</label>
  <label><input type="radio" name="radio1" value="0" class="radio"/>No</label>
</div>
<h4>Shipping address</h4>
<input type="text" id="s_fname" placeholder="First Name" />
<input type="text" id="s_lname" placeholder="Last Name" />
<input type="text" id="shipping_company" placeholder="Company Name" />

如何在复选框上更改输入字段的值

2 个答案: