Question

我在遍历复选框列表（由foreach函数创建）时遇到麻烦。当我尝试使用某个输入ID的代码时，它可以工作，但是当我尝试多个输入ID时，它却无法工作，而且我很确定我在javascript部分的for循环中做错了什么。我试图实现，当我选中一个复选框时，它消失了（输入文本可以保留）。这是我目前的方法：

<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

在您的复选框中添加一些类别，例如fadeable。

然后将change绑定到类：

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

Answer 2

您不需要在jquery中使用for循环，您可以这样操作：

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

选中时隐藏复选框

2 个答案: