2

標準入力ラジオを別の画像、基本的にはラジオ自体の視覚的なグレーディングスケールに置き換えようとしています。他の多くの人が持っているように、ラベルタグの使用に依存しないクロスブラウザーソリューションが必要です。実際の質問テキストには既に label タグを使用しています。これを行うには、入力の ID をターゲットにして画像の切り替えを行います。これはjqueryでできますか？私が言ったように、これには label タグを使用することはできません。また、これについて私が見たすべての例では label を使用していますが、これは可能ではありません。

基本的に、これは私がコードとして持っているものです。

 <label>Question Goes Here</label>
 <input type="radio" name="question1" id="Best"    value="5" />
 <input type="radio" name="question1" id="Better"  value="4" />
 <input type="radio" name="question1" id="Average" value="3" />
 <input type="radio" name="question1" id="Worse"   value="2" />
 <input type="radio" name="question1" id="Worst"   value="1" />
4

2 に答える 2

2 
var images = {
  Best: 'path_to_image',
  Better: 'path_to_image',
  Average: 'path_to_image',
  Worse: 'path_to_image',
  Worst: 'path_to_image'
};

$('input[type=radio][name^=question]').each(function() {
   var id = this.id;
   $(this)
          .hide()  // hide the radio button
          .after('<img src="'+ images[id] +'">'); // insert the image 
                                                  // after corresponding radio
});
于 2012-09-12T14:25:10.123 に答える
1

コードパラドックスの答えを拡張し、目に見えるチェック状態の重要な機能を追加しました。これがフィドルです：http://jsfiddle.net/crowjonah/cfN5t

挿入された を再構築し、この回答.afterから大いに借りて、実際に非表示のラジオ ボタンをオンまたはオフにするクリック機能を追加し、 CSS を使用してその外観を変更する機会を提供しました。js 変数に格納された srcs を持つ実際のイメージ タグではなく、CSS 背景イメージを使用することを選択し、jQuery セレクターとして使用するクラスを各入力に追加して、イメージに変換するラジオ ボタンのみをターゲットにしました。HTMLは次のとおりです。.live.radio-image

<label>How good?</label>
 <input type="radio" class="radio-image" name="question1" id="best"    value="5" />
 <input type="radio" class="radio-image" name="question1" id="better"  value="4" />
 <input type="radio" class="radio-image" name="question1" id="average" value="3" />
 <input type="radio" class="radio-image" name="question1" id="worse"   value="2" />
 <input type="radio" class="radio-image" name="question1" id="worst"   value="1" />

スクリプト：

   $(function() {
    $('input[type=radio].radio-image').each(function() {
        var id = this.id;
        $(this).hide().after('<a class="newrad" href="#"><div class="radio" id="' + id + '"></div></a>');
    });
    $('.newrad').live('click', function(e) {
        e.preventDefault();
        var $check = $(this).prev('input');
        $('.newrad div').attr('class', 'radio');
        $(this).find('div').addClass('checked');
        $('input[type=radio].radio-image').attr('checked', false);
        $check.attr('checked', true);
    });
});​

およびCSS（ここで、画像とオプションでそれらのチェック状態を定義します）：

label {display:block;}
.radio {
    opacity: 0.5;
    width: 80px;
    height: 80px;
    float: left;
    margin: 5px;
}
.checked {opacity: 1;}
#best {background: url(http://www.placehold.it/80&text=Best);}
#better {background: url(http://www.placehold.it/80&text=Better);}
#average {background: url(http://www.placehold.it/80&text=Average);}
#worse {background: url(http://www.placehold.it/80&text=Worse);}
#worst {background: url(http://www.placehold.it/80&text=Worst);}
​
于 2012-09-12T14:33:16.020 に答える