2008年09月23日

チェックが入るとチェックボックスとラベル(文字)の背景色が変わります。

スポンサード リンク

背景色を変えてチェックの有無を視覚的にわかりやすくします。
ラベルは OnClick イベントハンドラを使っています。

サンプルソース

<HTML>
<HEAD>
<TITLE>チェックが入るとチェックボックスとラベル(文字)の背景色が変わります</TITLE>
<STYLE type="text/css">
<!--
a,label{cursor:pointer;}
label:hover { color : red; }
.Mychk1{
width:140px;
margin:5px 2px 2px 0px;
font:12px;
}
-->
</STYLE>
<SCRIPT language=JavaScript>
<!--
function chebg(chkID){
Myid=document.getElementById(chkID);
if(Myid.checked == true){
Myid.parentNode.style.backgroundColor = '#C6E5FF';
}
else{Myid.parentNode.style.backgroundColor = '#FFFFFF';}
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<div class ="Mychk1"><INPUT type="checkbox" id = "c_box1" onclick="chebg('c_box1')"><label for="c_box1">Javascript</label></div>
<div class ="Mychk1"><INPUT type="checkbox" id = "c_box2" onclick="chebg('c_box2')"><label for="c_box2">スタイルシート</label></div>
<div class ="Mychk1"><INPUT type="checkbox" id = "c_box3" onclick="chebg('c_box3')"><label for="c_box3">ブログ カスタマイズ</label></div>
<div class ="Mychk1"><INPUT type="checkbox" id = "c_box4" onclick="chebg('c_box4')"><label for="c_box4">メニュー作成</label></div>
<div class ="Mychk1"><INPUT type="checkbox" id = "c_box5" onclick="chebg('c_box5')"><label for="c_box5">カラー 色</label></div>
</FORM>
</BODY>
</HTML>

  選択したチェックボックスの親ノードを取得してその背景色を変えています。
Myid=document.getElementById(chkID);//チェックしたボックスの要素を格納
Myid.parentNode.style.backgroundColor = '#C6E5FF';//Myid の親ノード,
「 この場合は
<div class ="Mychk1">........</div>の部分」の背景色を変更します。
ボタンを押すと <INPUT type="checkbox" id = "c_box1...
親ノード(parentNode)のノード名(nodeName)である "div"
クラス名(className)"Mychk1"を表示します.

  関連項目
チェックボックスのラベルでもチェックの On/Off ができます。

posted by javaScript at 20:03 | 大阪 ☀ | チェックボックス | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。