使用多个复选框显示/隐藏内容

Question

我需要隐藏SVG图形并显示图标。 该事件必须由不可见的复选框处理。问题是，当onchange事件被触发时，所有复选框都会被选中，因此所有图标都会显示，所有输入都会被选中。

知道如何为每个input[type="checkbox"]单独设置事件处理程序吗？

var $checkbox = $('.form-control'),
  $iconCheck = $('.check-circle'),
  $imgSVG = $('.img');

  $($checkbox).on('change', function() {
    if ($(this).is(':checked')) {
      $iconCheck.removeClass('d-none');
      $imgSVG.addClass('d-none');
    } else {
      $iconCheck.addClass('d-none');
      $imgSVG.removeClass('d-none');
    }
  });

img {
  display: block;
  width: 40px;
  height: 40px;
}
.d-none {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">
  <figure>
    <img class="img" src="https://cdn3.iconfinder.com/data/icons/halloween-29/64/ghost-512.png" alt="">
    <i class="check-circle d-none">CHECKED!</i>
  </figure>
  <label for="checkboxTerror">Terror</label>
  <input id="checkboxTerror" type="checkbox" class="form-control">
</div>


<div class="card">
  <figure>
    <img class="img" src="http://icons.iconarchive.com/icons/icons8/ios7/256/Cinema-Comedy-2-icon.png" alt="">
    <i class="check-circle d-none">CHECKED!</i>
  </figure>
  <label for="checkboxTerror">Comedy</label>
  <input id="checkboxTerror" type="checkbox" class="form-control">
</div>

屏幕截图示例

Answer 1

我没有javascript

的答案

你可以像CSS Trick那样解决。

＆＃13;

＆＃13;

/*var $checkbox = $('.form-control'),
  $iconCheck = $('.check-circle'),
  $imgSVG = $('.img');

  $($checkbox).on('change', function() {
    if ($(this).is(':checked')) {
      $(this).parent().children('.check-circle').removeClass('d-none');
      //$iconCheck.removeClass('d-none');
      $imgSVG.addClass('d-none');
    } else {
      $iconCheck.addClass('d-none');
      $imgSVG.removeClass('d-none');
    }
  });*/

＆＃13;

img {
  display: block;
  width: 40px;
  height: 40px;
}
.d-none {
  display: none;
}
input[type=checkbox].form-control:checked + figure > img{
  display: none;
}
input[type=checkbox].form-control:checked + figure > .check-circle{
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">
  <label for="checkboxTerror">Terror</label>
  <input id="checkboxTerror1" type="checkbox" class="form-control">
  <figure>
    <img class="img" src="https://cdn3.iconfinder.com/data/icons/halloween-29/64/ghost-512.png" alt="">
    <i class="check-circle d-none">CHECKED!</i>
  </figure>
  
</div>


<div class="card">
  <label for="checkboxTerror">Comedy</label>
  <input id="checkboxTerror2" type="checkbox" class="form-control">
  <figure>
    <img class="img" src="http://icons.iconarchive.com/icons/icons8/ios7/256/Cinema-Comedy-2-icon.png" alt="">
    <i class="check-circle d-none">CHECKED!</i>
  </figure>
   
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

通过在$checkbox之外定义三个变量$iconCheck，$imgSVG和$($checkbox).on('change', ...)，您将选择每个现有元素，而不是与复选框相关的元素。< / p>

您应该使用$('.form-control').each(...)并将change事件分别应用于每个事件。然后，您可以使用$(this).parent().find('...')找到最近的图像。

以下是一个工作示例：

＆＃13;

＆＃13;

$('.form-control').each(function() {
  $(this).on('change', function() {
    let $iconCheck = $(this).parent().find('.check-circle');
    let $imgSVG = $(this).parent().find('.img');

    if ($(this).is(':checked')) {
      $iconCheck.removeClass('d-none');
      $imgSVG.addClass('d-none');
    } else {
      $iconCheck.addClass('d-none');
      $imgSVG.removeClass('d-none');
    }
  });
});

＆＃13;

img {
  display: block;
  width: 40px;
  height: 40px;
}

.d-none {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">
  <figure>
    <img class="img" src="https://cdn3.iconfinder.com/data/icons/halloween-29/64/ghost-512.png" alt="">
    <i class="check-circle d-none">CHECKED!</i>
  </figure>
  <label for="checkboxTerror">Terror</label>
  <input id="checkboxTerror" type="checkbox" class="form-control">
</div>


<div class="card">
  <figure>
    <img class="img" src="http://icons.iconarchive.com/icons/icons8/ios7/256/Cinema-Comedy-2-icon.png" alt="">
    <i class="check-circle d-none">CHECKED!</i>
  </figure>
  <label for="checkboxTerror">Comedy</label>
  <input id="checkboxTerror" type="checkbox" class="form-control">
</div>

＆＃13;

＆＃13;

＆＃13;