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

Share Improve this question Follow edited Aug 6, 2018 at 10:27 user3108268 asked Aug 6, 2018 at 10:13 user3108268user3108268 1,08333 gold badges1919 silver badges4141 bronze badges 1

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

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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>