[英]Turn radio buttons into links by jQuery
I don't know what the specific name to this kind of form controller is (if there even is one), but basically I want to change radio elements like so; 我不知道这种形式控制器的具体名称是什么(如果有的话),但是基本上我想像这样更改无线电元素。
<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>
...into stylized links, the checked of which has a special class. ...到风格化的链接中,选中的链接有一个特殊的类。 For an example, I'd list the size selection element on Macys.com .
例如,我将在Macys.com上列出尺寸选择元素 。
How can I turn the radios into these kinds of box links? 如何将收音机变成此类盒装链接? Is there a library or plug-in that already does this?
是否有已经执行此操作的库或插件?
I can modify the DOM, but the elements need to be radio buttons for the convenience of non-JS users. 我可以修改DOM,但是为了方便非JS用户,这些元素必须是单选按钮。
You can pretty much reuse the standard form elements. 您几乎可以重用标准表单元素。 With js enabled, hide the radio buttons, style the labels, and bind a
click
event to add the active
/ selected
class. 启用js后,隐藏单选按钮,设置标签样式并绑定
click
事件以添加active
/ selected
类。 Clicking a label will still select the underlying radiobutton. 单击标签仍将选择下面的单选按钮。
Example jsFiddle: http://jsfiddle.net/Y6BzY/ jsFiddle示例: http : //jsfiddle.net/Y6BzY/
JS JS
$('input[type="radio"], label').addClass('js');
$('label').on('click', function() {
$('label').removeClass('active');
$(this).addClass('active');
});
CSS 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;
}
Ephram, Ephram,
I visited the link you have provided and all I can see there are spans with a number in them for size selection. 我访问了您提供的链接,我所看到的全部都是带有数字的跨度,用于选择尺寸。 Did you mean those, or like those?
你是说那些,还是喜欢那些?
About you're question: I understand that the reason to show links instead of boxes would be the absence of js support. 关于您的问题:据我了解,显示链接而不是显示框的原因是缺少js支持。 Have you considered using a tag with hardcoded radio buttons in them and spans, like in your example, outside the noscript tags?
您是否考虑过在标签和跨度中使用带有硬编码单选按钮的标签,例如您的示例,在noscript标签之外?
In any case, I don't really see the need to manipulate the DOM for this to be honest. 无论如何,说实话,我真的没有看到需要操纵DOM。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.