JavaScript チェックボックスの設置とスタイルの変更

検索サイト 便利eelife JavaScriptサンプル集Top
   検索サイト 便利eelife トップ : JavaScriptサンプル集トップ >> チェックボックス

チェックボックスの設置とスタイルの変更。
:文字  :背景  :ボーダー

チェックを入れてください!


サンプルソースから書き方まで、JavaScriptに関する情報はこちら  All About [JavaScript]


サンプルソース
<!--HTMLタグ </HEAD>の下に挿入してください。-->
<BODY >
<FORM name="myFORM">
<INPUT type="checkbox" name="Moji" onclick="mojikazari()" checked>:文字 
<INPUT type="checkbox" name="Bgc" onclick="mojikazari()">:背景 
<INPUT type="checkbox" name="Border" onclick="mojikazari()">:ボーダー
<INPUT type="checkbox" disabled>:
<P id="idName" style="font-size : 20px;border-color : maroon;">チェックを入れてください!</P>
</FORM>

</BODY>
<!--Javascript <HEAD>と</HEAD>の間に挿入してください。 -->
<SCRIPT language="JavaScript">
<!--eelife
//-----文字飾りの変更
function mojikazari(){
Obj=document.myFORM;

if (Obj.Moji.checked){mojiiro = 'black';}   //文字チェック
else{mojiiro = 'red'};   

if (Obj.Bgc.checked){haikei = 'yellow';}   //背景チェック
else{haikei = '#ffffff'};

if (Obj.Border.checked){line = 'double';}   //ボーダ チェック
else{line = 'none'};

idName.style.color = mojiiro;         //文字色変更
idName.style.backgroundColor = haikei;  //背景色変更
idName.style.borderStyle = line;       //ボーダ変更

}


// -->
</SCRIPT>
コメント
チェック ボックスは複数選択をする場合に使います。
ラジオボタンは複数項目の中から一つ選ぶときに使います。

<INPUT type="checkbox"> : チェックボックスの設置 
checked : 最初に表示されたときチェックをオンにします。
無ければオフになります。
name : それぞれのチェックボックスを識別する名前です。
disabled : チェック ボックスを無効化します。

Obj.Moji.checked :  チェックされているかどうか調べます。

サンプルソースから書き方まで、JavaScriptに関する情報はこちら  All About [JavaScript]

サイトマップ Copyright (C) eelife  All rights reserved リンクはご自由に