用于单选按钮选择器的网格图像替代方案的 CSS/JS？

Question

是否有任何 CSS 工具包可以让您重现单选按钮功能，但使用在网格中布置的照片/图像？例如，汽车租赁网站上的汽车模型网格，用户需要通过点击汽车图片为其租赁应用程序选择首选汽车。

这类似于 HTML 选择菜单小部件，除了:

• 布局是一个网格，而不是一行元素(即需要换行)。
• 当前选择的元素是持久的并且总是可见的，可以选择带有复选标记(或其他基于图标的指示器来显示选择)
• 如果网格在浏览器调整大小时智能地自行布局(重新计算行和列)，那就太好了。
• 如果能够在单选(单选按钮)和多选(复选框按钮)模式之间进行选择，那就太好了。

我原以为这会很简单，但我真的很难找到这样的东西。 JQuery UI button functionality很接近，但(我认为)不提供以图像为中心的按钮或重排网格。

Answer 1

这应该适合您。您将每辆汽车包装在 DIV 中，在里面放一个复选框，然后将图像包装在复选框的 label 中。单击图像选中复选框。

然后 jQuery 将包装 DIV 的类更改为 selected，这样您就可以设置它的样式，使其明显表明汽车已被选中。

jQuery

jQuery(document).ready(function ($) {
    'use strict';
    $('input:checkbox').click(function () {
        $(this).closest('.photo').toggleClass('selected');
    });
});

HTML

<div class="photo">
    <input type="checkbox" name="image[0][status]" value="1" />
    <label for="image[0][status]">
        <img src="#" />
    </label>
</div>