[取消选中复选框时从输入中删除值

问题描述 投票:0回答:2

我有带输入字段的复选框。单击复选框后,相关的输入字段将打开,并在输入中键入一些文本。但是,当我取消选中该复选框时,来自相关输入的文本应为空白。

<?php 
  $result = $obj->show_social_icons();
  foreach($result as $row)
   {
?>
  <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[]" value="<?php echo $row['id']; ?>">

  <?php echo $row['name']; ?>
  <div class="max_tickets">
    <input type="text" name="link[]" class="link">
  </div>
  <br>
<?php } ?>

我的jquery是:

 jQuery(document).ready(function($) {
$('input.maxtickets_enable_cb').change(function(){
if ($(this).is(':checked'))
$(this).next('.max_tickets').show();
else
$(this).next('.max_tickets').hide();
}).change();
});

当我取消选中该复选框时,相关的输入字段应为空白或删除。这没有发生。请帮助。

javascript php jquery
2个回答
2
投票

对不起,无法使用PHP。因此示例仅出现在HTMLjQuery中。

您隐藏了div的父级input,但没有清空它。

jQuery(document).ready(function($) {
  $('input.maxtickets_enable_cb').change(function() {
    if ($(this).is(':checked'))
      $(this).next('.max_tickets').show();
    else
      $(this).next('.max_tickets').hide().children('input').val('');
  }).change();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[]" value="1">
<div class="max_tickets">
  <input type="text" name="link[]" class="link">
</div>
<br>
<input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[]" value="2">
<div class="max_tickets">
  <input type="text" name="link[]" class="link">
</div>
<br>
<input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[]" value="3">
<div class="max_tickets">
  <input type="text" name="link[]" class="link">
</div>
<br>

1
投票

要从input中删除该值,请使用val('')。同样,next()在这种情况下不起作用,因为这些元素不是同级元素。您echo他们之间的文本节点。要解决此问题,您可以将每个循环块包装在div中,并使用closest()find()的组合。

还请注意,您可以简化show() / hide()逻辑以改为使用toggle(),提供checked属性作为确定内容是否可见的布尔参数。

最后,使用label元素使用户能够通过复选框单击文本以进行检查。

jQuery($ => {
  $('input.maxtickets_enable_cb').change(function() {
    $(this).closest('.row').find('.max_tickets').toggle(this.checked).find('input').val('');
  }).trigger('change');
});
.max_tickets { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <label>
    <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[]" value="id1" /> 
    Name #1
  </label>
  <div class="max_tickets">
    <input type="text" name="link[]" class="link">
  </div>
</div>
<div class="row">
  <label>
    <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[]" value="id2" /> 
    Name #2
  </label>
  <div class="max_tickets">
    <input type="text" name="link[]" class="link">
  </div>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.