удалить значение из ввода, когда снимите флажок

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

Извините, не удалось использовать 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>

Answer 2

Чтобы удалить значение из input, используйте val(''). Кроме того, next() не работает в этом случае, так как элементы не являются братьями и сестрами; Вы echo текстовый узел между ними. Чтобы исправить это, вы можете обернуть каждый зацикленный блок в div и использовать комбинацию closest() и find().

Также обратите внимание, что вы можете упростить show() / hide() logi c вместо использования 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>