Как поставить галочку на выбранном изображении

Question

Кто-нибудь знает, как сделать так, чтобы при нажатии на изображение в правом верхнем углу выбранного изображения появлялась галочка вроде ✓?Идея состоит в том, что при выборе другого значок другого исчезает и следует тому же эффекту, с которым я работал.

Я искал, но не могу найти правильное решение с помощью Jquery или css

.cc-selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}

.cc-selector input:active +.drinkcard-cc{opacity: .9;}

.cc-selector input:checked +.drinkcard-cc +.fa-check{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
            display: show;

}

.drinkcard-cc{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: brightness(1) grayscale(1) opacity(.7);
       -moz-filter: brightness(1) grayscale(1) opacity(.7);
            filter: brightness(1) grayscale(1) opacity(.7);
}

.drinkcard-cc:hover{
    -webkit-filter: brightness(1.04) grayscale(.5) opacity(1.2);
       -moz-filter: brightness(1.04) grayscale(.5) opacity(1.2);
            filter: brightness(1.04) grayscale(.5) opacity(1.2);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cc-selector">

    <div>

        <input checked="checked" id="checkRabbit" type="radio" name="rabbit" value="rabbit">

        <label class="drinkcard-cc rabbit" for="checkRabbit">

            <img src="https://pbs.twimg.com/profile_images/378800000012999353/237fc396ff1510bb381c2a534a834fd7.jpeg" class="img-responsive">

        </label>

    </div>

    <div>

        <input id="checkMonkey" type="radio" name="monkey" value="monkey">

        <label class="drinkcard-cc monkey" for="checkMonkey">

            <img src="https://pbs.twimg.com/profile_images/653420524975079424/VOzhTPsz_400x400.jpg" class="img-thumbnail">

        </label>

    </div>

</div>

Answer 1

Вы можете прикрепить обработчик кликов к изображению. При нажатии на img добавьте класс к элементу, чтобы дифференцировать его как активное состояние.

Вы можете установить элемент svg или img (который является галочкой) на display: none и переключать его, когда элемент находится в активном состоянии.

Пример имеет те же функции, но вместо этого использует границу для дифференциации активного состояния.

document.querySelectorAll('.item').forEach(item => {
  item.addEventListener('click', clickHandler);
});

function clickHandler(e) {
  let target = e.target;

  [...document.querySelectorAll('.item')].filter(item => item !== target).forEach(item => {
    item.classList.remove('active');
  });

  target.classList.add('active');

}

.cc-selector input {
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.cc-selector input:active+.drinkcard-cc {
  opacity: .9;
}

.cc-selector input:checked+.drinkcard-cc+.fa-check {
  -webkit-filter: none;
  -moz-filter: none;
  filter: none;
  display: show;
}

.drinkcard-cc {
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  -webkit-transition: all 100ms ease-in;
  -moz-transition: all 100ms ease-in;
  transition: all 100ms ease-in;
  -webkit-filter: brightness(1) grayscale(1) opacity(.7);
  -moz-filter: brightness(1) grayscale(1) opacity(.7);
  filter: brightness(1) grayscale(1) opacity(.7);
}

.drinkcard-cc:hover {
  -webkit-filter: brightness(1.04) grayscale(.5) opacity(1.2);
  -moz-filter: brightness(1.04) grayscale(.5) opacity(1.2);
  filter: brightness(1.04) grayscale(.5) opacity(1.2);
}

.item.active {
  border: 2px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cc-selector">

    <div>

        <input checked="checked" id="checkRabbit" type="radio" name="rabbit" value="rabbit">

        <label class="drinkcard-cc rabbit" for="checkRabbit">

            <img src="https://pbs.twimg.com/profile_images/378800000012999353/237fc396ff1510bb381c2a534a834fd7.jpeg" class="img-responsive item active">

        </label>

    </div>

    <div>

        <input id="checkMonkey" type="radio" name="monkey" value="monkey">

        <label class="drinkcard-cc monkey" for="checkMonkey">

            <img src="https://pbs.twimg.com/profile_images/653420524975079424/VOzhTPsz_400x400.jpg" class="img-thumbnail item">

        </label>

    </div>

</div>