使用像复选框一样的图像

Question

我想有一个标准复选框的替代方案-基本上我想使用图像，当用户单击图像时，淡出并覆盖一个勾选框。

本质上，我想做一些类似于Recaptcha 2的事情，当它让您点击符合特定标准的图像时。您可以在这里看到Recaptcha演示，但有时它可能会让您解决文本问题，而不是图像选择。下面是一个截图：

当您单击其中一个图像（在本例中，包含牛排图片）时，您单击的图像会缩小，并显示蓝色勾号，表示您已勾选该图像。

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

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

Answer 1

查看这个jQuery插件：imgCheckbox（在npm和bower上）

免责声明：解决此问题不需要javascript。

使用非常简单的超文本标记语言（没有复选框和标签等的混乱）：

<img class="checkable" src="http://lorempixel.com/100/100" />

您可以使用jQuery的toggleClass在单击事件上打开/关闭选中的或选中的类：

$("img.checkable").click(function () {
    $(this).toggleClass("checked");
});

选中的项目是使用

$(".checked")

您可以基于此设置图像样式，但一个大问题是没有其他DOM

$("img.checkable").wrap("<span class='fancychecks'>")

这使得你的html非常干净，你的js非常易读。看看这个片段...

/* Note that this js actually responds
   to a click event on the wrapped element!
   (not the image) */
$("img.checkable").wrap("<span class='fancychecks'>")
  .parent().click(function() {
    $(this).toggleClass("checked");
  });

/* style the images */
span.fancychecks img {
  display: block;
  margin: 0;
  padding: 0;
  transition-duration: 300ms;
  transform: scale(1);
  filter: none;
  -webkit-filter: grayscale(0);
}
span.fancychecks.checked img {
  transform: scale(0.8);
  filter: gray;
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
}

/* style the parent spans */
span.fancychecks {
  padding: 0;
  margin: 5px;
  display: inline-block;
  border: 1px solid transparent;
  transition-duration: 300ms;
}
span.fancychecks.checked {
  border-color: #ccc;
}

/* Using conexo's fantastic CSS, make the checkmarks */
span.fancychecks::before {
  background-color: rgba(50, 200, 50, 0.7);
  color: white;
  content: "✓";
  font-weight: bold;
  border-radius: 50%;
  position: absolute;
  margin: 2px;
  top: 1;
  left: 1;
  z-index: 1;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transform: scale(0);
  transition-duration: 300ms;
}
span.fancychecks.checked::before {
  transform: scale(1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<img class="checkable" src="http://lorempixel.com/100/100/city/1" />
<img class="checkable" src="http://lorempixel.com/100/100/city/2" />
<img class="checkable" src="http://lorempixel.com/100/100/city/3" />

Answer 2

调用了三个整洁的设备：

1. ：选中的选择器
2. ：：在伪选择器之前
3. csscontent属性

label:before {
  content: url("https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/unchecked_checkbox.png");
  position: absolute;
  z-index: 100;
}
:checked+label:before {
  content: url("https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/checked_checkbox.png");
}
input[type=checkbox] {
  display: none;
}
/*pure cosmetics:*/
img {
  width: 150px;
  height: 150px;
}
label {
  margin: 10px;
}

<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1">
  <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR0LkgDZRDTgnDrzhnXGDFRSItAzGCBEWEnkLMdnA_zkIH5Zg6oag">
</label>
<input type="checkbox" id="myCheckbox2" />
<label for="myCheckbox2">
  <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRhJjGB3mQxjhI5lfS9SwXou06-2qT_0MjNAr0atu75trXIaR2d">
</label>
<input type="checkbox" id="myCheckbox3" />
<label for="myCheckbox3">
  <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQuwWbUXC-lgzQHp-j1iw56PIgl_2eALrEENUP-ld72gq3s8cVo">
</label>

Answer 3

这很容易自行实现，不需要预先制定的解决方案。它还会教你很多，因为你看起来不太容易使用CSS。

您的复选框需要具有不同的id属性。这允许您连接

示例：

<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1"><img src="http://someurl" /></label>

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

接下来，通过应用例如display:none来隐藏复选框 到它。

现在剩下要做的就是为标签：：before伪元素（将用作可视复选框替换元素）设置所需的样式：

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

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

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

（相邻同级选择器）确保只更改标记中直接跟随隐藏复选框的标签。

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

当然，您需要正确定位标签并应用show： block；并设置正确的宽度和高度。

我在这些说明之后创建的coDepen示例和代码片段使用了相同的技术，但是没有为复选框使用图像，复选框替换纯粹是用CSS完成的，在标签上创建了一个::before选中，具有内容: "✓";。添加一些圆润的边框和甜美的过渡，结果真的很可爱！

这里是一个工作代码，展示了这项技术，不需要复选框的图像：

http://codepen.io/anon/pen/wadwpx

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

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;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

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="https://picsum.photos/seed/1/100" /></label>
  </li>
  <li><input type="checkbox" id="cb2" />
    <label for="cb2"><img src="https://picsum.photos/seed/2/100" /></label>
  </li>
  <li><input type="checkbox" id="cb3" />
    <label for="cb3"><img src="https://picsum.photos/seed/3/100" /></label>
  </li>
  <li><input type="checkbox" id="cb4" />
    <label for="cb4"><img src="https://picsum.photos/seed/4/100" /></label>
  </li>
</ul>