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

Question

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

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

Answer 1

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

Answer 2

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

最小化的 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/

Answer 3

您应该使用类（不是 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/