2

このようなページを変更する方法を探しています> http://speckyboy.com/demo/digg-style-radio-buttons/index.html ユーザーが行ごとに1つの選択を強調表示できるように、IOW 8ラジオボタングループを使用して従来の外観のラジオ ボタン コントロールではなく、同等のビジュアル スタイルです。

過去数日間、ラジオボタングループを処理するために見つけたstackoverflowのほぼすべての提案を試しましたが、それらの提案を適切に適応させるのに十分なjsを明らかに知りません。誰でも助けることができますか？

4

3 に答える 3

0

要素にクラスを使用するだけです-バックグラウンドでラジオボタンを使用していたのか、投稿した例が気に入らなかったのかわかりません

最小化された 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/

于 2012-10-08T19:38:37.900 に答える
0

クラスを使用する必要があります (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/

于 2012-10-08T19:12:34.713 に答える
0

単一のエンティティとして機能するように、すべてのラジオ ボタンに同じ ID を使用できませんか? その後、好きな場所に配置できます。

于 2012-10-08T19:10:04.670 に答える