I have a checkbox when clicked it fills input form with the value from another input form (e.g. when you have shipping and billing forms and want to save some time by not typing in the same thing twice). So when checked it fills the input, but when unchecked how to delete values?

HTML

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

<script src=".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>

I have a checkbox when clicked it fills input form with the value from another input form (e.g. when you have shipping and billing forms and want to save some time by not typing in the same thing twice). So when checked it fills the input, but when unchecked how to delete values?

HTML

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

<script src="https://ajax.googleapis./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

• javascript
• jquery

• what is your final solution looks like ? – Niklesh Raut Commented Aug 7, 2018 at 4:45

4 Answers 4

Try with checking if checkbox is checked - if not, set empty value:

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

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

use an if-else for this to check if checkbox is checked or not

Simply do this

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

<script src="https://ajax.googleapis./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>

@user3108268 : Use for loop and put name or id or different class to catch that input to copy and then put it for billing section. I am using different name here to distinguish them . like below

$('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./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>