jQueryを使って文字を選んでボックスの背景色を変える

ネットショップの注文フォームとかで色を指定してもらう時に、色を名称で選んでもらうだけではなく、商品の色が変わったり出来ないかな?と思って作ってみました。

注文フォームで選んだ内容が送信されないといけないので、色の選択はラジオボタンを使用します。だけども、ラジオボタンの丸いのを隠したかったので、CSSで消してラベルのみを表示しました。

<script>
$(function(){
 $("label").click(function(){
 var selectcolor=$("input:checked").attr("value");
 $("#colorbox").css("background-color",selectcolor);
 });
})
</script>
<style type="text/css">
#colorbox {
 width:20px;
 height:20px;
 background-color:#ccc;
}
input {
 display:none;
 width:0;
 height:0;
}
</style>

html

<form name="form1" method="post" action="">
<p>
<label>
<input type="radio" name="color" value="red" id="color_0">
red</label>
<label>
<input type="radio" name="color" value="yellow" id="color_1">
yellow</label>
<label>
<input type="radio" name="color" value="blue" id="color_2">
blue</label>

</p>
<div id="colorbox"></div>
</form>

ラジオボタンを使用することで、疑似セレクタの「:checked」が使えるようになるので、チェック状態の時にそのチェックボタンの属性値を取得し、cssで設定するようにしています。