使用复选框等图像

Question

我希望有一个标准复选框的替代品 - 基本上我想使用图像,当用户点击图像时,淡出它并覆盖一个勾选框.

从本质上讲,我想做一些类似于Recaptcha 2的功能,当它让你点击符合特定标准的图像时.您可以在此处查看Recaptcha演示,但有时可能会让您解决文本问题,而不是图像选择.所以这是一个截图:

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

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

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

Answer 1

纯语义HTML/CSS解决方案

这很容易自己实现,不需要预先制定的解决方案.它也会教你很多,因为你似乎不太容易使用CSS.

这是你需要做的:

您的复选框需要具有不同的id属性.这允许您<label>使用标签的for-attribute 连接到它.

例:

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

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

接下来,通过应用示例display: none;来隐藏复选框.

现在剩下要做的就是为你的label::before伪元素设置你想要的样式(它将用作可视复选框替换元素):

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

在最后一个棘手的步骤中,当选中:checked复选框时,您将使用CSS' 伪选择器来更改图像:

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

该+(相邻兄弟选择器)可确保您只更改直接按照标记隐藏复选框标签.

您可以通过将两个图像放在一个spritemap中并仅应用更改background-position而不是交换图像来优化它.

当然,您需要正确定位标签并应用display: block;并设置正确的width和height.

编辑:

我在这些说明之后创建的codepen示例和代码段使用相同的技术,但不是使用图像作为复选框,复选框替换完全使用CSS完成,::before在标签上创建,一旦选中,就具有content: "?";.添加一些圆形边框和甜蜜过渡,结果非常可爱!

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

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="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>

Answer 2

纯CSS解决方案

调用了三个整洁的设备:

1. 该:checked选择
2. 该::before伪选择
3. css content属性.

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

看到这个jQuery插件:imgCheckbox(在npm和bower上)

免责声明:解决此问题不需要javascript.紧张是在代码的可维护性和效率之间.虽然不需要插件(或任何javascript),但它确实可以使构建更快,并且通常更容易更改.

准系统解决方案:

使用非常简单的HTML(没有复选框和标签等):

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

您可以使用jQuery的toggleClass打开/关闭事件的一个selected或checked类click:

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

检查项目是用

$(".checked")

加凉爽:

您可以基于此设置图像样式,但一个大问题是,如果没有其他DOM元素,您甚至无法使用::before并::after添加复选标记等内容.解决方案是使用另一个元素包装图像(并且将点击侦听器附加到包装元素也是有意义的).

$("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" />

使用imgCheckbox jQuery插件:

受上述解决方案的启发,我构建了一个插件,可以像以下一样轻松使用:

$("img").imgCheckbox();

• 将已检查图像的数据注入表单
• 支持自定义复选标记
• 支持自定义CSS
• 支持预选元素
• 支持无线电组而不是简单的图像切换
• 有事件回调
• 明智的默认值
• 轻巧,超级好用

看到它在行动(并看到来源)

Answer 4

我想追加额外的分度,position: relative;并class="checked"具有相同的宽度/高度,该图像具有与比在位置left: 0; top: 0;包含图标.它始于display: none;.

现在你可以听click-event:

$( '.captcha_images' ).click( function() {
    $(this + '.checked').css( 'display', 'block' );
    $(this).animate( { width: '70%', height: '70%' } );
});

这样您就可以获得图标并以较小的方式调整图像大小.

注意:只是想向您展示我的想法背后的"逻辑",这个例子可能不起作用或有一些错误.