Question

单击时，我有一个复选框，它用另一个输入表单中的值填充输入表单（例如，当您拥有运输和开票表单时，想通过不两次输入相同的内容来节省一些时间）。因此，当选中时，它将填充输入，但是当未选中时，如何删除值？

HTML

$('input[name="shipping"]').click(function() {
  $(".billing .country").val($(".shipping .country").val());
  $(".billing .city").val($(".shipping .city").val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='checkbox' name='shipping' value='Best Seller' /><label>Same as shipping address</label>

<div class="shipping">
  Shipping address
  <input class="country" type="text" placeholder="Country">
  <input class="city" type="text" placeholder="City">
</div>

<div class="billing">
  Billing address
  <input class="country" type="text" placeholder="Country">
  <input class="city" type="text" placeholder="City">
</div>

JSFiddle

Answer 1

尝试检查是否已选中复选框-如果未选中，则设置空值：

$('input[name="shipping"]').click(function () {
  var checked = $(this).is(':checked');
  var value = checked ? $(".shipping .country").val() : '';
  $(".billing .country").val(value);
});

Answer 2

$('input[name="shipping"]').click(function () {
    if($(this).is(':checked'))
       $(".billing .country").val($(".shipping .country").val());
   else
      $(".billing .country").val('');
});

为此使用if-else检查复选框是否被选中

Answer 3

只需执行

$('input[name="shipping"]').on('change',function(){
  var isChecked=$(this).is(":checked"),
      value=$(this).val();
      $('.country').val(isChecked?value:'');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='checkbox' name='shipping' value='Best Seller' /><label>Same as shipping address</label>

<div class="shipping">
  Shipping address
  <input class="country" type="text" placeholder="Country">
</div>

<div class="billing">
  Billing address
  <input class="country" type="text" placeholder="Country">
</div>

Answer 4

@ user3108268：用于循环并放入名称或ID或其他类，以捕获要复制的输入，然后将其放入计费部分。我在这里使用不同的名称来区分它们。像下面一样

$('input[name="shipping"]').click(function() {
  var shipping = $(".shipping input");
  if($(this).is(":checked")){
  for(let i=0;i<shipping.length;i++){
    $("[name="+$(shipping[i]).prop("name")+"_2]").val($(shipping[i]).val());
  }
  }else{
    $(".billing input").val("");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='checkbox' name='shipping' value='Best Seller' /><label>Same as shipping address</label>

<div class="shipping">
  Shipping address
  <input name="country" class="country" type="text" placeholder="Country">
  <input name="city" class="city" type="text" placeholder="City">
</div>

<div class="billing">
  Billing address
  <input name="country_2" class="country" type="text" placeholder="Country">
  <input name="city_2" class="city" type="text" placeholder="City">
</div>

取消选中复选框时删除值

4 个答案: