箇条書きの代わりに画像をクリックして、CSS だけでラジオ ボタンのスタイルを設定する簡単でシンプルな方法はありますか? たとえば、親指を上に向けたり、下に向けたりします。
2 つのラジオ ボタンがあり、どちらがクリックされたかを登録する必要があります。ボタンを押すとラジオ ボタンが表示され、ラジオ ボタンをクリックするとラジオ ボタンがテキストに置き換わります。
ボタン > ラジオボタン > テキスト
これは私が得た距離です:
HTML
<div id="txtradiocall_lille" style="display:none;">
<input id="Radio1" type="radio" value="yes" class="input_hidden" /><label for="yes"><img src="http://www.xxxx.dk/images/images/thumb_up_green.png" alt="Yes" /></label>
Yes
<input id="Radio1" type="radio" value="no" class="input_hidden" /><label for="no"><img src="http://www.xxxx.dk/images/images/thumb_down.png" alt="No" /></label>
No
</div>
CSS
.txtradiocall_lille input[type='radio']
{
display:inline;
}
.input_hidden {
position: absolute;
left: -9999px;
}
.selected {
background-color: #ccc;
}
#txtradiocall_lille label {
display: inline-block;
cursor: pointer;
}
#txtradiocall_lille label:hover {
background-color: #efefef;
}
#txtradiocall_lille label img {
padding: 3px;
}
ラジオ クリック ハンドラ
$("input[type='radio']").change(function () {
var selection = $(this).val();
getcallaskok(selection, talok);
});
現時点では、ラジオの弾丸の代わりに画像を取得していますが、クリック後に必要なテキストが取得されないため、クリックが登録されていないようです。
誰か助けてくれませんか?