CODEWITHSUNDEEP
javascriptjquery
user3108268
user3108268

Reputation: 1083

Remove value when checkbox unchecked

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.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

Upvotes: 3

Views: 3221

Answers (4)

Niklesh Raut
Niklesh Raut

Reputation: 34914

@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.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>

Upvotes: 0

Manoz
Manoz

Reputation: 6587

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.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>

Upvotes: 1

Akshey Bhat
Akshey Bhat

Reputation: 8545

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

Upvotes: 1

hsz
hsz

Reputation: 152216

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);
});

Upvotes: 3

Related Questions