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

Posted 2023-05-08

【中文标题】如何在单击图像时勾选复选框

【英文标题】：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的可能重复

抱歉让我修复它，因为我可以看到图像。

不，这不是上一个问题的重复，我在发布这个问题之前已经提到过。

【参考方案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)

即使在 *** 中尝试它，它仍然会取代 (prntscr.com/j96ics)。

@joe997 即使有你的照片，它对我来说也很好。 jsfiddle.net/tgm1mLaL/2

是的，它现在可以工作，之前它不是。非常感谢。

【参考方案2】：

 <label class="custom-checkbox">

 <img class="img" src="https://placeimg.com/640/480/any" />
  <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"   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://***.com/a/69395887/12569619