javascript - 通过 jQuery 将单选按钮变成链接

Question

我不知道这种表单 Controller 的具体名称是什么(如果有的话)，但基本上我想像这样更改单选元素；

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

我怎样才能把 radio 变成这些盒子链接？是否有库或插件已经这样做了？

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

Answer 1

您几乎可以重用标准表单元素。启用 js 后，隐藏单选按钮，设置标签样式，并绑定(bind)一个 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;
}