选择面板 - javascript 单选按钮组答案

【问题标题】：Selection panel - javascript radio button groups选择面板 - javascript 单选按钮组
【发布时间】：2012-09-29 01:35:50
【问题描述】：

我正在寻找一种方法来修改这样的页面> http://speckyboy.com/demo/digg-style-radio-buttons/index.html 因此用户可以突出显示每行的一个选择，IOW 8 单选按钮组使用类似的视觉风格，而不是传统的单选按钮控件。

最近几天我已经尝试了几乎所有在 stackoverflow 中可以找到的用于处理单选按钮组的建议，但我显然不知道足够多的 js 来正确调整这些建议。有人可以帮忙吗？

【问题讨论】：

使用name属性jsfiddle.net/SZ2EU对它们进行分组

标签： javascript jquery radio-button radio-group

【解决方案1】：

您不能对所有单选按钮使用相同的 id，以便它们作为一个实体工作吗？然后你可以把它们放在你喜欢的任何地方。

【讨论】：

目前所有单选按钮都具有相同的 id，这就是为什么只有所有可选文本字符串中的一个被突出显示的原因。我正在尝试找到一种在每一行中选择一个的方法，因此最终，在该特定页面的布局中，可以突出显示 8 个元素（每行 1 个）。

【解决方案2】：

你应该使用class（不是ID，id在页面上必须是唯一的）。

1 你可以获得所有单选按钮

$('.class')

2 现在你可以使用each 更多细节在这里http://api.jquery.com/each/

 $('.class').each(function(index) {
       // Add to element
    });

3 添加你可以用

http://api.jquery.com/add/

http://api.jquery.com/appendTo/

http://api.jquery.com/append/

http://api.jquery.com/html/

【讨论】：

【解决方案3】：

只需为您的元素使用一个类 - 不确定您是否在后台使用单选按钮或与您发布的示例不同

最小化的html

<div id='group1' class='radio'>
Group 1
<input type='radio' name='test'/> 
</div>
<div class='row'>
    <a href='#' class='c'>group 1a</a>   
</div>

jQuery

$('.row a').click(function(e){
   e.preventDefault();
   var $this = $(this);
   $this.addClass('sel') // add class to currently clicked anchor
        .siblings() // get siblings
        .removeClass('sel'); // remove class from siblings

   $('.radio').eq($('.row').index($this.parent())) // <-- get row of radios equal to this row
              .find('input[type=radio]') // find the inputs radios under this
              .eq($this.index()) // get radio with same index as clicked anchor
              .click(); // trigger click
});

http://jsfiddle.net/Lupw9/

【讨论】：

天啊！非常感谢，wirey，尤其是 JSFiddle 视图。我刚开始学习 js，但是解决基本概念的甜蜜小书示例永远不会像检查实际实现以研究它们如何运行那样有帮助。
@user1729539 np.. :) 编程很有趣！！如果它回答了您的问题，请不要忘记接受答案