2

我不知道这种表单控制器的具体名称是什么（如果有的话），但基本上我想像这样更改无线电元素；

<input type="radio" name="size" value="S" id="size_S" />
  <label for="size_S">S</label>
<input type="radio" name="size" value="M" id="size_M" />
  <label for="size_M">M</label>
<input type="radio" name="size" value="L" id="size_L" />
  <label for="size_L">L</label>

...进入程式化的链接，其检查有一个特殊的类。例如，我会在 Macys.com 上列出尺寸选择元素。

我怎样才能把收音机变成这种盒子链接？是否有已经这样做的库或插件？

我可以修改 DOM，但是为了方便非 JS 用户，元素需要是单选按钮。

4

2 回答 2

6

您几乎可以重用标准表单元素。启用 js 后，隐藏单选按钮、设置标签样式并绑定click事件以添加active/selected类。单击标签仍将选择基础单选按钮。

示例 jsFiddle：http: //jsfiddle.net/Y6BzY/

JS

$('input[type="radio"], label').addClass('js');

$('label').on('click', function() {
    $('label').removeClass('active');
    $(this).addClass('active');
});

CSS

input[type="radio"].js {
    display: none;
}

label.js {
    display: block;
    float: left;
    margin-right: 5px;
    border: 1px solid black;
    padding: 4px;
    cursor: pointer;
}

label.js.active {
    border: 1px solid blue;
    color: blue;
}
于 2012-05-28T02:14:08.197 回答
1

以弗兰，

我访问了您提供的链接，我只能看到其中有一个带有数字的跨度用于尺寸选择。你是说那些，还是喜欢那些？

关于您的问题：我知道显示链接而不是框的原因是缺少 js 支持。您是否考虑过在 noscript 标签之外使用带有硬编码单选按钮和跨度的标签，就像在您的示例中一样？

无论如何，老实说，我真的不认为有必要为此操作 DOM。

于 2012-05-28T01:22:53.397 回答