Question

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

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

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

Answer 1

要从const edit = () => { setdisabled(true); };中删除该值，请使用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; }

Answer 2

抱歉，无法使用PHP。因此示例仅在HTML和jQuery中。

您正在隐藏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>

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

2 个答案: