Question

我正在尝试创建一个用户可以选择选项的表单，而不是使用复选框，我希望他们能够选择图像。

当他们选择图像时，他们可能会在他们周围有一个边框，表明他们已被选中。

哪种输入处理这个？

Answer 1

由于复选框是选中/未选中的默认HTML行为，我会这样做：

创建表单
对于每张图片，请在其旁边添加一个复选框
为具有相似ID的图像和复选框命名（checkbox1 / image1，checkbox2 / image2，...）
使用Javascript隐藏复选框
将Javascript事件绑定到每个图像以检查/取消选中与图像关联的复选框（可以使用ID或通过它们在DOM中的位置来完成）

这将具有额外的优势，即禁用Javascript的人仍然可以通过单击复选框来选择图像。

Answer 2

使用buttons。您可以使用用户将看到的背景图像，并使用元素的值处理表单。

再见

Answer 3

您可以使用jQuery插件http://ajaxdump.com/?0BNm4jJ0

Answer 4

解决方案1

您可以反过来使用（仅在Chrome中测试）:before和图片：

演示：http://jsfiddle.net/SO_AMK/hG9Fh/

不，我做了不只是输入我头顶的所有CSS :D

CSS，此代码纯粹是为Chrome构建的，并且不以任何方式跨浏览器兼容：

input[type='checkbox'] {
  -webkit-appearance: none;
  -webkit-user-select: none;
  background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
      inset 0 1px 2px rgba(255, 255, 255, 0.75);
  color: #444;
  font: inherit;
  margin: 0 1px 0 0;
  text-shadow: 0 1px 0 rgb(240, 240, 240);
}

input[type='checkbox'] {
  bottom: 2px;
  height: 13px;
  position: relative;
  vertical-align: middle;
  width: 13px;
}

input[type='checkbox']:checked::before {
  -webkit-user-select: none;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpGNzdGMTE3NDA3MjA2ODExODIyQUNDRTE5M0FEN0FEQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0QjQ3OTIzNkI3NEQxMUUxODVFM0E5RkQzRkE4MDc5QiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0QjQ3OTIzNUI3NEQxMUUxODVFM0E5RkQzRkE4MDc5QiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjkwRTAxMTQxMjIwNjgxMTgwODNEQUM5MDc1RTIzMkQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Rjc3RjExNzQwNzIwNjgxMTgyMkFDQ0UxOTNBRDdBREMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4TU+XQAAAAcklEQVQY02NgwA/YoJgoEA/Es4DYgJBCJSBeD8SboRinBiYg7kZS2IosyQ/Eakh8LySFq4FYHFlxGRBvBOJYqMRqJMU+yApNkSRAeC0Sux3dfSCTetE0wKyXxOWhMKhTYIr9CAUXyJMzgLgBagBBgDPGAI2LGdNt0T1AAAAAAElFTkSuQmCC');
  background-size: 100% 100%;
  content: '';
  display: block;
  height: 100%;
  width: 100%;
}

:enabled:hover:input[type='checkbox'] {
  background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
  border-color: rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12),
      inset 0 1px 2px rgba(255, 255, 255, 0.95);
  color: black;
}

:enabled:active:input[type='checkbox'] {
  background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
  box-shadow: none;
  text-shadow: none;
}

input:disabled:[type='checkbox'] {
  opacity: .75;
}

:enabled:focus:input[type='checkbox'] {
  -webkit-transition: border-color 200ms;
  border-color: rgb(77, 144, 254);
  outline: none;
}

解决方案2

将复选框替换为触发它们的图片，点击此处有一篇好文章：http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

如何使图像充当html表单中的复选框？

4 个答案:

解决方案1

解决方案2

如何使图像充当html表单中的复选框？

4 个答案:

解决方案1 ​​

解决方案2

解决方案1