如何在所选图像上打上复选标记

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>