2008年12月14日

チェックボックスのすべて選択 すべて解除

スポンサード リンク

チェックボックスの選択


Javascript
スタイルシート
ブログカスタマイズ

JavaScript 作成お役立ちサイト
All About [JavaScript]サンプルソースから書き方まで
All About [ホームページ作成]HP作成に役立つ情報満載

サンプルソース

<html>
<head>
<title>チェックボックスのチェック すべて選択/すべて解除</title>
<script language="Javascript">
<!--
flag =false;
var index;
function allChange(){
 flag = !flag; // trueとfalseの切り替え ! 否定演算子
 var elem = document.getElementsByName("chk");
    for(index = 0; index < elem.length; index++){
     elem[index].checked = flag;
     }
 }
//-->
</script>
</head>
<body>
<form>
<input type="button" name="all" value="すべて選択/すべて解除" onClick="allChange();"/><br/>
<input type="checkbox" name="chk" value="1" />Javascript<br/>
<input type="checkbox" name="chk" value="2" />スタイルシート<br/>
<input type="checkbox" name="chk" value="3" />ブログカスタマイズ
</form>
</body>
</html>

checked プロパティ メニュー項目の選択状態
checked =true;(チェックが入っています) checked =false;(チェック解除)
elem =document.getElementsByName("chk"); として name属性が chk の全要素を得ます。
name属性はグループ化の為 複数設定できるのでその名前を持つオブジェクトの数を
for (ループカウンタ)を使って調べname属性が chk の全要素のchecked プロパティ
値を切り替えています
flag = !flag; // trueとfalseの切り替え ! 否定演算子
トグルスイッチ(0と1、trueとfalseを切り替え)条件分岐
チェックボックスのチェックできる数を制限し,入力不可にします。
チェックが入るとチェックボックスとラベル(文字)の背景色が変わります。
ツリーメニュー チェックボックスにチェックを入れるとメニューが展開

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

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 | 大阪 ☀ | チェックボックス | このブログの読者になる | 更新情報をチェックする
×

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