javascript - 如何在所选图像上打勾

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>