fc2ブログ

ネットで見つけた面白い記事や、役立つのではと感じたネタなどを書いています。

javascript:ラジオボタンのクリックでラベルの色を変更したい


こういうラジオボタンがあって、
選択されている方のラジオボタンを分かりやすくしたいとき、
javascriptでラベルの背景色を変更することが出来ます。


ソースは以下。
<script type="text/javascript">
<!--
//ラジオボタンの色変更
function radiobg(ID){
id=document.getElementById(ID);
//選択されたらラベルの色変更
if(id.checked == true){
id.parentNode.style.backgroundColor = '#ffdfff';
}

ON=document.getElementById('on');
OFF=document.getElementById('off');

//非選択のラベルの背景色をデフォルトの色に戻す
if(ON.checked == false){
ON.parentNode.style.backgroundColor = '#f4f4f4';
}
if(OFF.checked == false){
OFF.parentNode.style.backgroundColor = '#f4f4f4';
}
}
// -->
</script>


<label for="on"><input type="radio" name="radio" value="1" id="on" checked="checked" onclick="radiobg('on')" />ラジオボタン1</label><br />
<label for="off"><input type="radio" name="radio" value="1" id="off" onclick="radiobg('off')" />ラジオボタン2</label>

スポンサーリンク

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバックURLはこちら
http://sf51.blog42.fc2.com/tb.php/54-c42f7a7a
この記事にトラックバックする(FC2ブログユーザー)