マウスポインタの動作でラジオボタンの色を変更

投稿日: 2011年4月21日 作成者: alphasis

マウスポインタをラジオボタンの上に合わせると、色を反転（背景色と文字色を変化）させ、さらに、選択したラジオボタンの背景色を変え目立たせる。
ロールオーバーでラジオボタンの色を反転する JavaScript を、拡張したものだ。

実装例

実装例の動作について

  • ポップ、ロック、テクノのラジオボタンの上に、マウスポインタを合わせると、ラジオボタンの色を反転（背景色と文字色を変化）させる。
  • ポップ、ロック、テクノのラジオボタンの上から、マウスポインタを離すと、元のラジオボタンの色に戻す。
  • ポップ、ロック、テクノの何れかのラジオボタンを選択（クリック）すると、背景色が変化する。

ソースコード

JavaScript

<script type="text/javascript">
<!--
function onload() {
    for ( num = 0; num < document . Form1 . music . length; num++ ) {
        if ( document . Form1["music"][num] . checked ) {
            document . getElementById( 'radio-' + num ) . style . backgroundColor = 'aquamarine';
            document . getElementById( 'radio-' + num + '-label' ) . style . color = 'black';
        }
    }
}
window.onload = onload;
function changeColor( mouse, id ) {
    if ( mouse == 'over' ) {
        document . getElementById( id ) . style . backgroundColor = 'cadetblue';
        document . getElementById( id + '-label' ) . style . color = 'white';
    } else if ( mouse == 'out' ) {
        for ( num = 0; num < document . Form1 . music . length; num++ ) {
            if ( document . Form1["music"][num] . checked ) {
                var checked = 'radio-' + num;
            } else {
                document . getElementById( 'radio-' + num ) . style . backgroundColor = 'white';
                document . getElementById( 'radio-' + num + '-label' ) . style . color = 'black';
            }
        }
        if ( id == checked ) {
            document . getElementById( id ) . style . backgroundColor = 'aquamarine';
            document . getElementById( id + '-label' ) . style . color = 'black';
        }
    }
}
// -->
</script>

CSS

<style type="text/css">
<!--
form#form-1 div {
    background-color : white;
    color : black;
    padding: 0px 0px 2px 5px;
    display: inline;
}
form#form-1 label {
    padding: 0 10px 0 2px;
    color : black;
}
-->
</style>

HTML

<form id="form-1" name="Form1" method="post" action="#">
<div id="radio-0" onMouseOver="changeColor( 'over', 'radio-0' )" onMouseOut="changeColor( 'out', 'radio-0' )">
<input type="radio" name="music" value="ポップ" id="rock" checked><label for="rock" id="radio-0-label"> ポップ</label>
</div>
<div id="radio-1" onMouseOver="changeColor( 'over', 'radio-1' )" onMouseOut="changeColor( 'out', 'radio-1' )">
<input type="radio" name="music" value="ロック" id="pop"><label for="pop" id="radio-1-label"> ロック</label>
</div>
<div id="radio-2" onMouseOver="changeColor( 'over', 'radio-2' )" onMouseOut="changeColor( 'out', 'radio-2' )">
<input type="radio" name="music" value="テクノ" id="techno"><label for="techno" id="radio-2-label"> テクノ</label>
</div>
</form>

解説

JavaScript

<script type="text/javascript">
<!--
function onload() {
    for ( num = 0; num < document . Form1 . music . length; num++ ) { // ラジオボタンの数だけループ
        if ( document . Form1["music"][num] . checked ) { // チェック（選択）されている場合
            document . getElementById( 'radio-' + num ) . style . backgroundColor = 'aquamarine'; // id属性の値が、"radio-" + 変数numの値 （"radio-0"など）である要素の背景色を変更
            document . getElementById( 'radio-' + num + '-label' ) . style . color = 'black'; // id属性の値が、"radio-" + 変数numの値 + "-label"（"radio-0-label"など）である要素の文字色を変更
        }
    }
}
window.onload = onload; // ページを表示したとき、onload() を呼び出す
function changeColor( mouse, id ) { // 引数を変数mouseと変数idに代入
    if ( mouse == 'over' ) { // マウスポインタをラジオボタンの上に合わせたとき
        document . getElementById( id ) . style . backgroundColor = 'cadetblue'; // id属性の値が、変数idの値である要素の背景色を変更
        document . getElementById( id + '-label' ) . style . color = 'white'; // id属性の値が、変数idの値 + "-label" である要素の文字色を変更
    } else if ( mouse == 'out' ) { // マウスポインタをラジオボタンの上から離したとき
        for ( num = 0; num < document . Form1 . music . length; num++ ) { // ラジオボタンの数だけループ
            if ( document . Form1["music"][num] . checked ) { // チェック（選択）されている場合
                var checked = 'radio-' + num; // 変数checked に、"radio-" + 変数num を代入
            } else { // チェック（選択）されていない場合
                document . getElementById( 'radio-' + num ) . style . backgroundColor = 'white'; // id属性の値が、"radio-" + 変数numの値 （"radio-0"など）である要素の背景色を元に戻す
                document . getElementById( 'radio-' + num + '-label' ) . style . color = 'black'; // id属性の値が、"radio-" + 変数numの値 + "-label"（"radio-0-label"など）である要素の文字色を元に戻す
            }
        }
        if ( id == checked ) { // 変数id の値と 変数checked の値が等しいとき
            document . getElementById( id ) . style . backgroundColor = 'aquamarine'; // id属性の値が、変数idの値である要素の背景色を変更
            document . getElementById( id + '-label' ) . style . color = 'black'; // id属性の値が、変数idの値 + "-label" である要素の文字色を変更
        }
    }
}
// -->
</script>

cadetblue、aquamarine、white、black の部分を、カラーネームもしくはカラーコードで変更することにより、他の色を使うことができる。

CSS

<style type="text/css">
<!--
form#form-1 div { /* IDが、form-1 の form 要素内の div 要素 */
    background-color : white;  /* 背景色 */
    color : black; /* 文字色 */
    padding: 0px 0px 2px 5px; /* 内側の余白: 上 右 下 左 */
    display: inline; /* 表示形式: インライン */
}
form#form-1 label { /* IDが、form-1 の form 要素内の label 要素 */
    padding: 0 10px 0 2px; /* 内側の余白: 上 右 下 左 */
    color : black; /* 文字色 */
}
-->
</style>

HTML

onMouseOver="changeColor()"

div 要素内のイベント属性の onMouseOver で、JavaScript の changeColor() を呼び出している。

onMouseOut="changeColor()"

div 要素内のイベント属性の onMouseOut で、JavaScript の changeColor() を呼び出している。

changeColor()

changeColor()の引数は、（ over もしくは out , div 要素の id の値 ）となっている。

一つ目の引数

onMouseOver で呼び出すときは、over を指定。
onMouseOut で呼び出すときは、out を指定。

ラジオボタン項目を増やすには

<div id="radio-0" onMouseOver="changeColor( 'over', 'radio-0' )" onMouseOut="changeColor( 'out', 'radio-0' )">
<input type="radio" name="music" value="ポップ" id="rock" checked><label for="rock" id="radio-0-label"> ポップ</label>
</div>

の部分を増やすことで、ラジオボタン項目を増やすことができる。
“radio-0” と “radio-0-label” の数字の部分は、0、1、2、3、4 ・・・のように、0 からの連番を指定。例えば、ラジオボタン項目が3つの場合、最後のラジオボタン項目はの数字部分は、2 となる。

スポンサード リンク

カテゴリー: JavaScript, フォーム, 逆引き パーマリンク