Question

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

<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>

...进入程式化链接，其中有一个特殊类。例如，我列出了size selection element on Macys.com。

如何将无线电转换为这些类型的盒子链接？是否有已经执行此操作的库或插件？

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

Answer 1

您几乎可以重复使用标准表单元素。启用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;
}

Answer 2

Ephram，

我访问了您提供的链接，我可以看到所有链接都有一个数字，用于选择尺寸。你的意思是那些，或喜欢那些？

关于你的问题：我理解显示链接而不是框的原因是缺少js支持。您是否考虑在其中使用带有硬编码单选按钮的标记，并在noscript标记之外使用跨度（如示例）？

在任何情况下，我都不认为有必要操纵DOM，这是诚实的。

通过jQuery将单选按钮转换为链接

2 个答案: