Question

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

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

Answer 1

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

Answer 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/

Answer 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/

选择面板 - javascript单选按钮组

3 个答案: