jquery – 使用复选框等图像[复制]

参见英文答案 > Change checkbox check image to custom image6个答案我想要一个标准复选框的替代品 – 基本上我想使用图像，当用户点击图像时，淡出它并覆盖一个勾选框。

从本质上讲，我想做一些类似于Recaptcha 2的功能，当它让你点击符合特定标准的图像时。你可以see a Recaptcha demo here但它有时可以让你解决文字问题，而不是图像选择。所以这是一个截图：

当您单击其中一个图像(在这种情况下，包含牛排图片)时，您单击的图像会缩小并显示蓝色勾号，表示您已勾选它。

假设我想重现这个确切的例子。

我意识到我可以有9个隐藏的复选框，并附加一些jQuery，这样当我点击图像时，它会选择/取消选中隐藏的复选框。但是如何缩小图像/覆盖蜱？

解决方法

纯语义HTML / CSS解决方案

这很容易实现，无需预先制定的解决方案。它也会教你很多，因为你似乎不太容易使用CSS。

这是你需要做的：

您的复选框需要具有不同的ID属性。这允许您连接< label>使用标签的for-attribute来实现它。

例：

<input type="checkBox" id="myCheckBox1" />
<label for="myCheckBox1"><img src="http://someurl" /></label>

将标签附加到复选框将触发浏览器行为：每当有人单击标签(或其中的图像)时，将切换复选框。

接下来，通过应用示例display：none来隐藏复选框;它。

现在剩下要做的就是为你的标签设置你想要的样式：在伪元素之前(复选框替换元素)：

label:before {
    background-image: url(../path/to/unchecked.png);
}

在最后一个棘手的步骤中，您使用CSS’：选中选择器来在选中复选框时更改图像：

:checked + label:before {
    background-image: url(../path/to/checked.png);
}

(相邻的兄弟选择器)确保您只更改标记中直接跟随隐藏复选框的标签。

您可以通过将两个图像放在一个spritemap中并仅在背景位置应用更改而不是交换图像来优化它。

当然你需要正确定位标签并应用display：block;并设置正确的宽度和高度。

编辑：

我在这些说明之后创建的codepen示例和代码段使用相同的技术，但不是使用图像作为复选框，复选框替换完全使用CSS完成，创建一个：在标签之前，一旦选中，就有内容：“✓”;添加一些圆形边框和甜蜜过渡，结果非常可爱！

这是一个工作的codepen，展示了该技术，并不需要复选框的图像：

07000

以下是代码段中的相同代码：

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: 100px;
  width: 100px;
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
}

:checked + label {
  border-color: #ddd;
}

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

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

<ul>
  <li><input type="checkBox" id="cb1" />
    <label for="cb1"><img src="http://lorempixel.com/100/100" /></label>
  </li>
  <li><input type="checkBox" id="cb2" />
    <label for="cb2"><img src="http://lorempixel.com/101/101" /></label>
  </li>
  <li><input type="checkBox" id="cb3" />
    <label for="cb3"><img src="http://lorempixel.com/102/102" /></label>
  </li>
  <li><input type="checkBox" id="cb4" />
    <label for="cb4"><img src="http://lorempixel.com/103/103" /></label>
  </li>
</ul>

原文地址：https://www.jb51.cc/jquery/181695.html

jquery – 使用复选框等图像[复制]

解决方法

相关推荐