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

Question

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

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

• 布局是一个网格，而不是一行项目（即需要换行）。
• 当前选定的项目是永久性的，并且始终可见，可以选择带有复选标记（或其他基于图标的指示器以显示选择）
• 如果网格在浏览器调整大小时智能地布局（重新计算行和列），那就太好了。
可以选择在单选（单选按钮）
• 和多选（复选框按钮）模式之间进行选择也会很好。

我以为这很简单，但我很难找到这样的东西。JQuery UI 按钮功能很接近，但（我认为）不提供以图像为中心的按钮或重排网格。

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>