代码之家 › 专栏 › 技术社区 › user3108268

取消选中复选框时删除值

jquery javascript

user3108268 · 技术社区 · 7 年前

单击时我有一个复选框,它用另一个输入表单的值填充输入表单(例如,当您有发货和帐单表单,并且希望通过不键入同一个表单两次来节省一些时间)。所以,如果选中,它将填充输入,但如果不选中,如何删除值?

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

4 回复 | 直到 7 年前

hsz 7 年前

尝试检查复选框是否已选中-如果未选中,请设置空值:

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

Akshey Bhat 7 年前

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

使用if else来检查是否选中复选框

Manoz 7 年前

就这么做

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

Niklesh Raut 7 年前

@user3108268:使用for循环并输入name或id或其他类来捕获要复制的输入,然后将其放入billing部分。我用不同的名字来区分他们。如下所示

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