Question

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

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

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

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

Answer 1

这对你有用。您将每辆汽车包裹在DIV中，在其中放入一个复选框，然后将图像包裹在label中以获取复选框。单击图像会选中该框。

然后，jQuery将包装DIV的类更改为选中，以便您可以设置样式以明确选择汽车。

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>

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

1 个答案: