1

画像をラジオボタンとして使用していて、jQueryでチェックされるラジオボタン（画像）にCSSスタイルを追加したいと思います。

これは、ラジオボタンとラベルが付いたHTMlコードです。

<input class="radio" type="radio" name="asw_options[box_background_color]" id="box_background_color0" value="aqua_solid"  checked='checked'>
<label for="box_background_color0"><img src="images/backgrounds/aqua.png"></label>
<input class="radio" type="radio" name="asw_options[box_background_color]" id="box_background_color1" value="blue_solid" >
<label for="box_background_color1"><img src="images/backgrounds/blue.png"></label>
<input class="radio" type="radio" name="asw_options[box_background_color]" id="box_background_color2" value="black_solid" >
<label for="box_background_color2"><img src="images/backgrounds/black.png"></label>

これは、ラジオボタンを画像として機能させるために使用するjqueryコードです。

$('#solidcolor input:radio').addClass('input_hidden');
$('#solidcolor label').click(function() {
    $(this).addClass('selected').siblings().removeClass('selected');
});

これはうまくいきます。画像を選択すると、非表示のラジオボタンがチェックされ、画像が強調表示されるため、選択したことがわかります。次に、設定を保存します。これは正常に機能します。

私が知りたいのは、ページがリロードされたときに、チェックされたラジオボタン（画像ラベル）に3pxの黒い枠線を追加して、以前にどの選択をしたかがわかるようにすることです。

現在、ページをリロードすると、すべての画像（ラベル）が黒い境界線で表示されます。

これは、以前に保存したラジオボタンを強調表示するために使用しようとしているjQueryです。

$("#solidcolor input[type='radio']:checked").each( 
function() { 
   $('#solidcolor label').css("border", "solid 3px black");
} 
);

これはjQueryを介して実行できますか、それともCSSを介して以前に選択したラジオボタンを強調表示することをお勧めしますか？

また、さまざまなjQuery関数を試しました。このコードを使用すると、以前に正しいチェック済みのラジオボタンが表示されますが、このコードを使用して、CSS境界線を特定のラベルに追加したりチェックしたりする方法がわかりません。ラジオボタン。

var isChecked = $("#solidcolor input[name=asw_options[box_background_color]]:checked").val();
 alert(isChecked);

助けてください、私は今3日間、1つに頭をぶつけています。

ありがとうございました

編集：

意味を示すためにjsfiddleを設定しました

jSFiddleの例

4

1 に答える 1

4

試してみることの 1 つは、.eachコールバックを更新することです。labelチェックされたチェックボックスに関連付けられたラベルを取得するために、属性セレクターをセレクターに追加しました

$("#solidcolor input[type='radio']:checked").each( 
    function() { 
       $("#solidcolor label[for='" + this.id + "']").css("border", "solid 3px black");
    } 
);
于 2012-08-08T23:54:30.863 に答える