KAKIMASSE

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

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

      2011/01/09



こういうラジオボタンがあって、
選択されている方のラジオボタンを分かりやすくしたいとき、
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>

<form id="hoge" action="" method="post">
<label style="border: 1px dashed #7f7f7f; background-color: #f4f4f4; padding: 2px 3px;" for="on"><input id="on" onclick="radiobg('on')" checked="checked" name="radio" type="radio" value="1" />ラジオボタン1</label><br />
<label style="border: 1px dashed #7f7f7f; background-color: #f4f4f4; padding: 2px 3px;" for="off"><input id="off" onclick="radiobg('off')" name="radio" type="radio" value="1" />ラジオボタン2</label><br />
</form>

 - JavaScript

SPONSORD LINKS

スポンサーリンク

スポンサーリンク

Message

メールアドレスが公開されることはありません。

  関連記事

no image
JavaScript:プルダウンを選択したらリンク先へ飛ばす方法

よくフォームのプルダウンのどれかを選択しただけで 決められたURLへアクセスする ...