チェックボックスの選択
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を切り替え)条件分岐
チェックボックスのチェックできる数を制限し,入力不可にします。
チェックが入るとチェックボックスとラベル(文字)の背景色が変わります。
ツリーメニュー チェックボックスにチェックを入れるとメニューが展開