图像复选框不起作用

Posted 2023-05-08

【中文标题】图像复选框不起作用

【英文标题】：image-Checkboxes aren t working

【发布时间】：2017-04-18 02:11:25

【问题描述】：

我有 3 个图片复选框。使用此代码：Codepen 1 他们看起来就像我想要的一样。

在下一步中，我添加了表单：Codepen 2

现在您看到了 - 表单正在创建 3 个自己的复选框，而不是使用图片。你能帮帮我吗？

【问题讨论】：

对不起，codepen 链接，但我没有大声张贴图片

在这里发布一个工作代码sn-p。

您的复选框 ids 与您的 labels for 属性不匹配。看起来您不了解图像复选框的工作原理。你可能想阅读这个：***.com/questions/30663562/use-images-like-checkboxes/…

【参考方案1】：

将您的<option> 的id 更改为<label> 的for 属性（在您的情况下，在<option> 的id 属性中使用cb1、cb2 和cb3） ，就像：

<li>
  <input type="checkbox" id="cb1" value="1" />
  <label for="cb1"><img src="http://betailor.de/wp-content/uploads/2016/12/engern.png" /></label>
</li>

看看下面的工作 sn-p：

ul 
  list-style-type: none;


li 
  display: inline-block;


input[type="checkbox"][id^="cb"] 
  display: none;


label 
  border: 1px solid #fff;
  padding: 10px;
  display: block;
  position: relative;
  margin: 10px;
  cursor: pointer;


label:before 
  background-color: white;
  color: white;
  content: " ";
  display: block;
  border-radius: 50%;
  border: 1px solid grey;
  position: absolute;
  top: -5px;
  left: -5px;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transition-duration: 0.4s;
  transform: scale(0);


label img 
  height: 49px;
  width: 122px;
  transition-duration: 0.2s;
  transform-origin: 50% 50%;


:checked + label 
  border-color: #ddd;


:checked + label:before 
  content: "✓";
  background-color: green;
  transform: scale(1);


:checked + label img 
  transform: scale(0.9);
  box-shadow: 0 0 5px #333;
  z-index: -1;

<form method="post" action="processform.php">
<ul>
  <li><input type="checkbox" id="cb1" value="1" />
    <label for="cb1"><img src="http://betailor.de/wp-content/uploads/2016/12/engern.png" /></label>
  </li>
  <li><input type="checkbox" id="cb2" value="1" />
    <label for="cb2"><img src="http://betailor.de/wp-content/uploads/2016/12/Kürzen.png" /></label>
  </li>
  <li><input type="checkbox" id="cb3" value="1" />
    <label for="cb3"><img src="http://betailor.de/wp-content/uploads/2016/12/reapieren.png" /></label>
  </li>
</ul>
<input type="submit" name="send" value="Submit" />
</p>
</form>

希望这会有所帮助！

【讨论】：

谢谢，它有帮助！我的错！我有 2 个脚本，我组合并忘记了这一点。