时间戳

首页 > 解决方案 > 选中时隐藏复选框

jquery - 选中时隐藏复选框

问题描述

我在通过复选框列表（由 foreach 函数创建）循环函数时遇到了一些问题。当我尝试使用某个输入 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>

先感谢您！

标签： jquerylaravel

解决方案

为您的复选框添加一些类，例如fadeable.

然后绑定change到类：

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

推荐阅读