背景色を変えてチェックの有無を視覚的にわかりやすくします。
ラベルは 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 ができます。
