如何在单击图像时勾选复选框答案

【问题标题】：How to Tick a checkbox on Clicking an image如何在单击图像时勾选复选框
【发布时间】：2018-10-03 23:22:56
【问题描述】：

我能够为其创建代码，但该复选框未出现在图像上方。有点偏了，怎么修？

.custom-checkbox input {
  display: none;
}

.custom-checkbox span {
  border: 2px solid #7e8a94;
  float: right;
  height: 20px;
  width: 20px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-checkbox:hover span,
.custom-checkbox input:checked + span {
  border: 3px solid #43D8B0;
}

.custom-checkbox input:checked + span:before {
  content: "✔";
}

 <label class="custom-checkbox">
    
 <img class="img" src="http://i63.tinypic.com/2rrqs1l.png"/>
  <input type="checkbox">
  <span></span>
</label>

我希望复选框出现在左上角，这样：http://prntscr.com/j960yk

感谢您的宝贵时间。

【问题讨论】：

你建议我在哪里上传？
问题标题没有描述您在问题详细信息中要求的内容
Use images like checkboxes的可能重复
抱歉让我修复它，因为我可以看到图像。
不，这不是上一个问题的重复，我在发布这个问题之前已经提到过。

标签： javascript html css

【解决方案1】：

在您的.custom-checkbox span CSS 规则中添加了float: left;，添加了一个br 标记并稍微修改了您的HTML。

.custom-checkbox input {
  display: none;
}

.custom-checkbox span {
  border: 2px solid #7e8a94;
  /* float: right; - you don't need that. Use float: left; */
  float: left;
  height: 20px;
  width: 20px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-checkbox:hover span,
.custom-checkbox input:checked+span {
  border: 3px solid #43D8B0;
}

.custom-checkbox input:checked+span:before {
  content: "✔";
}

<label class="custom-checkbox">
 <input type="checkbox">
  <span></span>   
  <br>
  <br>
 <img class="img" src="http://i63.tinypic.com/2rrqs1l.png"/>
</label>

【讨论】：

带有float:left，它来到图像的左侧（prntscr.com/j96aft），我想在图像的左上角显示复选框。
你能用我的图片 (i63.tinypic.com/2rrqs1l.png) 实现它吗，用你的图片可以正常显示，但是用我的图片，它仍然有点位移。 (prntscr.com/j96hnh)
即使在 stackoverflow 中尝试它，它仍然会取代 (prntscr.com/j96ics)。
@joe997 即使有你的照片，它对我来说也很好。 jsfiddle.net/tgm1mLaL/2
是的，它现在可以工作，之前它不是。非常感谢。

【解决方案2】：

 <label class="custom-checkbox">

 <img class="img" src="https://placeimg.com/640/480/any" width="300"/>
  <input type="checkbox">
  <span></span>
</label>

$(document).ready(function() {
 $('img').click(function() {
 $(this).find('checkbox').checked(true);
 })
});

工作小提琴https://jsfiddle.net/y88zLp2r/

【讨论】：

在我看来，他的复选框位置有问题，而不是功能问题
是的，我能够创建它的这个版本，请参考我的版本，我想要这种方式的复选框（prntscr.com/j960yk）。另外，我不想使用基本复选框，我更喜欢我的。
是的，复选框的位置不是功能问题。

【解决方案3】：

只需将输入放在图像之前并删除浮动右侧样式。

.custom-checkbox input {
  display: none;
}

.custom-checkbox span {
  border: 2px solid #7e8a94;
  height: 20px;
  width: 20px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-checkbox:hover span,
.custom-checkbox input:checked + span {
  border: 3px solid #43D8B0;
}

.custom-checkbox input:checked + span:before {
  content: "✔";
}

<label class="custom-checkbox">
 <input type="checkbox"/> 
  <span></span>
  <img class="img" src="http://i63.tinypic.com/2rrqs1l.png"/>
</label>

【讨论】：

【解决方案4】：

添加更多的 CSS

.custom-checkbox{
   position: relative;
   display: inline-block;
   padding-top: 30px;
 }
 .custom-checkbox span{
   position: absolute;
   top: 0;
   left: 0;
 }

这会起作用

【讨论】：

不，这个出现在图像上，而不是图像上方。 (prntscr.com/j96di1)
将 span 顶部属性设置为 -30px，即为什么我在标签上使用顶部填充。
上述解决方案工作得非常好。检查我结合你和我的代码的第二个答案。

【解决方案5】：

.custom-checkbox input {
  display: none;
}
.custom-checkbox{
   display: inline-block;
   position: relative;
   padding-top: 30px;
 }

.custom-checkbox span {
  border: 2px solid #7e8a94;
  float: right;
  height: 20px;
  width: 20px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
}

.custom-checkbox:hover span,
.custom-checkbox input:checked + span {
  border: 3px solid #43D8B0;
}

.custom-checkbox input:checked + span:before {
  content: "✔";
}

 <label class="custom-checkbox">
    
 <img class="img" src="http://i63.tinypic.com/2rrqs1l.png"/>
  <input type="checkbox">
  <span></span>
</label>

【讨论】：

【解决方案6】：

通过将for 属性添加到您的标签，并为其分配与复选框的name 属性相同的值，该标签将作为您的复选框的可点击扩展。

这样，您可以将标签放置在布局中的任何位置。像这样：

<label for="image-checkbox" class="custom-checkbox">
    <img class="img" src="http://i63.tinypic.com/2rrqs1l.png"/>
</label>
<input type="checkbox" name="image-checkbox">

【讨论】：

【解决方案7】：

$(document).on('ready',function(){
$("#avatar").on('click',function(){
$("#chkbox").trigger( "click" )

})

})

    .container {
      position: relative;
      width: 50%;
    }

    .image {
      display: block;
      width: 100%;
      height: auto;
    }

    .overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
      transition: .5s ease;
      background-color: #0000;
    }

    .container:hover .overlay {
      opacity: 1;
    }
    

    .text {
      color: white;
      font-size: 20px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      text-align: center;
    }

<div class="container">
      <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar"  class="image">
      <div id="avatar" class="overlay">
        <div class="text"><input id="chkbox" type="checkbox"></div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

【讨论】：

【解决方案8】：

 .custom-checkbox span {
     border: 2px solid #7e8a94;
     height: 20px;
     width: 20px;
     border-radius: 5px;
     cursor: pointer;
     display: flex;
     justify-content: center;
     align-items: center;
}

像这样改变html

<label class="custom-checkbox">
  <input type="checkbox">
  <span></span>
 <img class="img" src="http://i63.tinypic.com/2rrqs1l.png">
</label>

【讨论】：

本例中的复选框显示在图像上（prntscr.com/j96cd8），我希望它位于图像的左上角（prntscr.com/j960yk）
更改答案@joe997

【解决方案9】：

您可以使用 "label" 标签，其中包含 "img" 标签。

我只使用html和css。

我在这个链接上有答案：

https://stackoverflow.com/a/69395887/12569619

【讨论】：