【问题标题】:Turn radio buttons into links by jQuery通过 jQuery 将单选按钮转换为链接
【发布时间】:2012-06-02 10:48:40
【问题描述】:

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

<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用户使用。

【问题讨论】:

标签: javascript jquery css radio-button


【解决方案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;
}

【讨论】:

  • 非常感谢!这是一个聪明的解决方案
【解决方案2】:

以弗兰,

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

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

在任何情况下,老实说,我并不认为有必要操纵 DOM。

【讨论】:

  • 实际上,我想要 noscript 的单选按钮和带有 jQ​​uery 的 Macys 样式框。我想在不需要两次编写基本相同的 DOM 的情况下完成此操作,即使用 jQuery 将单选按钮替换为 span 或文档加载后的任何内容。
  • 好的,我建议您阅读 jQuery .each,基本上这可能就是您需要的一切。使用 .each 您可以隔离表单中的所有元素并将它们更改为您想要的任何内容。
猜你喜欢
  • 2011-01-03
  • 1970-01-01
  • 1970-01-01
  • 2018-11-30
  • 1970-01-01
  • 2011-07-18
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多