複数のチェックボックスを含むコンテンツの表示/非表示

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

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

Answer 2

私はあなたがそのようなCSS Trickで解決することができjavascript

のない答えを持っています。

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