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

【问题标题】：how to change values of input field on check box如何更改复选框上输入字段的值
【发布时间】：2018-08-27 06:26:33
【问题描述】：

我是 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 框架。请指导。

【问题讨论】：

您能简单描述一下您想要实现的目标吗？例如，您要保存哪些值？
信息太少了。究竟是什么存储在哪里？你想达到什么目标？你尝试了什么？

标签： jquery laravel laravel-5

【解决方案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">

【讨论】：

【解决方案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" />

【讨论】：