显示/隐藏具有多个复选框的内容

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来解决。

 /*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'); } });*/ 

 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; } 

 <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> 

Answer 2

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

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

这是一个工作示例：

 $('.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'); } }); }); 

 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>