Есть три чекбокса, как сделать так чтобы при нажатии на второй чекбокс, картинка появлялась та, которая тоже 2 по очереди
const modalInput = document.querySelectorAll('.modal-options-box__item input');
const modalCheck = document.querySelectorAll('.modal-options-box__item label i');
$(document).ready(function() {
console.log(modalInput);
[].forEach.call(modalInput,function(el){
el.addEventListener('click', function (e) {
console.log(modalCheck);
if ($(this).is(":checked")) {
modalCheck.style.display = 'block';
} else {
modalCheck.style.display= 'none';
}
});
});
});
.modal-options
width: 100%
height: 100vh
background: #2D313A
&-grid
padding-top: 100px
background: #222529
display: grid
grid-template-columns: 1fr 1fr 1fr
height: 800px
&-box
padding-left: 40px
margin-top: 50px
display: flex
flex-direction: column
&__item
margin-top: 14px
display: flex
justify-content: flex-start
&__text
color: #A2ABBA
font-size: 18px
font-family: 'Exo2-SemiBold'
line-height: 30px
margin-left: 20px
&__title
color: #A2ABBA
font-size: 22px
font-family: 'ProximaNova-Regular'
line-height: 30px
&__item
i
font-size: 20px
color: #A2ABBA
line-height: 30px
margin-left: 20px
display: none
label
position: relative
display: inline-block
width: 36px
height: 36px
background: #292D36
transition: 400ms 100ms ease-out
&:hover
border-color: #FF686B
.checked
position: absolute
left: 50%
top: 50%
transform: translate(-50%, -50%)
margin-left: 0
line-height: 20px
input[type="checkbox"]
position: absolute
left: -1px
<div class="modal-options-grid__item">
<div class="modal-options-box">
<div class="modal-options-box__item">
<div class="modal-options-box__title">
1
</div>
<i class="fas fa-info-circle"></i>
</div>
<div class="modal-options-box__item">
<input type="checkbox" id="cb1">
<label for="cb1"><i class="fas fa-check checked"></i></label>
<div class="modal-options-box__text">
Да
</div>
</div>
</div>
<div class="modal-options-box">
<div class="modal-options-box__item">
<div class="modal-options-box__title">
2
</div>
<i class="fas fa-info-circle"></i>
</div>
<div class="modal-options-box__item">
<input type="checkbox" id="cb2">
<label for="cb1"><i class="fas fa-check checked"></i></label>
<div class="modal-options-box__text">
Да
</div>
</div>
</div>
<div class="modal-options-box">
<div class="modal-options-box__item">
<div class="modal-options-box__title">
3
</div>
<i class="fas fa-info-circle"></i>
</div>
<div class="modal-options-box__item">
<input type="checkbox" id="cb3" >
<label for="cb1"><i class="fas fa-check checked"></i></label>
<div class="modal-options-box__text">
Да
</div>
</div>
</div>
</div>