Скрыть флажки, когда установлен

Question

У меня возникли проблемы с циклическим отображением функции в списке флажков (созданных функцией foreach). Когда я пробую код для определенного входного идентификатора, он работает, но когда я пробую его для нескольких, это не так, и я совершенно уверен, что я делаю что-то не так с циклом for в части javascript. Я пытаюсь добиться, чтобы при установке флажка он исчезал (текст ввода может остаться). Это мой нынешний подход:

<div class="col-xs-9 col-sm-8 col-md-7 col-lg-6">
  <div class="card-box">
    <h4 class="text-dark  header-title m-t-0 m-b-30">Redo Samples</h4>
    <div id='redo_div' class="text-center">
      <ul class="list-inline m-t-15">
        @php
        $i = 0;
        @endphp
        @foreach ($Redos as $Tubes)
        <li><input id="Redo_<?php echo $i; ?>" type="checkbox">{{$Tubes['TubeBarcodeID']}}</input></li>
        @php
        $i++;
        @endphp
        @endforeach
      </ul>
    </div>
  </div>
</div>

<script type="text/javascript">
  for (var i = 0; i > 0; i++) {
    $('#Redo_'.i).change(function() {
      if (this.checked)
        $('#Redo_'.i).fadeOut();
      else
        $('#Redo_'.i).fadeIn();
    });
  };
</script>

спасибо заранее!

Answer 1

Вам не нужно использовать цикл for в вашем jquery, вы можете сделать это следующим образом:

$('input[id^=Redo]').change(function() {
  if (this.checked)
    $(this).fadeOut();
  else
    $(this).fadeIn();
});

$('input[id^=Redo]') выбирает все входы, которые имеют id, начиная с Redo, таким образом, нам не нужно менять ваш HTML.

Демо

$('input[id^=Redo]').change(function() {
  if (this.checked)
    $(this).fadeOut();
  else
    $(this).fadeIn();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-xs-9 col-sm-8 col-md-7 col-lg-6">
  <div class="card-box">
    <h4 class="text-dark  header-title m-t-0 m-b-30">Redo Samples</h4>
    <div id='redo_div' class="text-center">
      <ul class="list-inline m-t-15">

        <li><input id="Redo_0" type="checkbox">code</input>
        </li>
        <li><input id="Redo_1" type="checkbox">code</input>
        </li>

      </ul>
    </div>
  </div>
</div>

Answer 2

Добавьте некоторый класс к своим флажкам, например, fadeable.

, а затем привяжите change к классу:

$('.fadeable').on('change', function () {
  if ( $(this).prop('checked') ) {
    $(this).fadeOut();
  }
});