おやじのweb工房/b003/チェックボックスを用いる

【おやじのweb技】 html/javascript/css等の基本技
winXP+IE6

TopPage表示 / 保　存 / 印　刷 / Window Resize / Window Close

b003

チェックボックスを用いる

【目次】
◇【技b003-1】チェックボックスを用いる(基本)
◇【技b003-2】チェックボックスを修飾する(スタイル属性)
　　　チェックボックスに背景色(ボックスと文字の両方に背景色)
　　　チェックボックスの枠を飾る(ボックスと文字の両方を枠で飾る)
　　　チェックボックスにカーソルを重ねると背景色が変化する
◇【技b003-3】チェックボックスをチェックすると背景色が変わる
◇【技b003-4】チェックボックスをすべてチェックする/チェック数量を調べる
　　　【1】全部のチェックボックスをすべてチェックする/チェックをはずす
　　　【2】チェックされている数量を調べる
　　　【3】指定数量以上チェックされたらアラート(警告)する
　　　【4】チェックされたチェックボックスのvalue属性を調べる
◇【技b003-5】チェックボックスの文字をクッリクしてもチェックできる
◇【技b003-6】チェックボックスの使用可能/使用不可を切り換える
◇【技b003-7】特定のチェックボックスがチェックされているときのみスクリプトを実行する
◇【解説等】

このページのトップに戻る / Window Resize / Window Close / 最終更新日表示

action
&
web技

｜topへ｜目次へ｜前へ｜次へ｜

**【技b003-1】チェックボックスを用いる(基本)**
[CheckBox-Gr1] 　Checkbox[11a]　　通常　Checkbox[11b]　　事前にチェック　Checkbox[11c]　　使用不可 [CheckBox-Gr2] 　Checkbox[12a]　　通常　Checkbox[12b]　　通常	チェックボックスをチェックすることは可能ですがそれ以外の動作はしません
◆手順【html】チェックボックスの基本記述 ※<form>～</form>に記述します ※グループ毎にname属性は同じにします ※value属性はチェックボックス毎に変えますが使用方法は後述します ※記述例 <form name="FORM1"> [CheckBox-Gr1] 　<input type="checkbox" name="chkBOX11" value="cb11a">Checkbox[11a] 　<input type="checkbox" name="chkBOX11" value="cb11b">Checkbox[11b] 　<input type="checkbox" name="chkBOX11" value="cb11c">Checkbox[11c] [CheckBox-Gr2] 　<input type="checkbox" name="chkBOX12" value="cb12a">Checkbox[12a] 　<input type="checkbox" name="chkBOX12" value="cb12b">Checkbox[12b] </form> ※チェックボックスのタグ(type="checkbox") 　　type属性:<input type="checkbox"～> 　　name属性:<input type="checkbox" name="□□" > 　　value属性:<input type="checkbox" value="□□"> ※最初にチェックを入れておくとき:(上記Checkbox[11b]) 　　<input type="checkbox" checked> 　　 ※使用不可:(上記Checkbox[11c]) 　　<input type="checkbox" disabled> (チェックできない/チェックをはずせない)

｜topへ｜目次へ｜前へ｜次へ｜

**【技b003-2】チェックボックスを修飾する**(スタイル属性)
ボックスに背景色　Checkbox[21a] ボックスと文字の両方に背景色　 Checkbox[21b]	■チェックボックスに背景色をつけます ◆チェックボックスに背景色 <input type="checkbox" name="chkBOX21a" 　　style="background:skyblue">Checkbox[21a] ◆チェックボックスと文字の両方に背景色 ※チェックボックスと文字を<span>～</span>で囲みます ※背景色は<span～>にstyle属性設定します <span style="background:skyblue"> <input type="checkbox" name="chkBOX21b">Checkbox[21b] </span> ※背景色のスタイルの詳細は　 [技m004]表のセルにマウスを重ねると背景色・背景画像やフォントが変わるを参照して下さい。
ボックスの枠　Checkbox[22a] ボックスと文字の両方に枠　 Checkbox[22b]	■チェックボックスの枠を飾ります ◆チェックボックスの枠　<input type="checkbox" name="chkBOX22a" 　　style="border-color:red;border-style:solid;border-width:1;">Checkbox[22a] ◆チェックボックスと文字の両方に枠 ※チェックボックスと文字を<span>～</span>で囲みます ※枠の修飾は<span～>にstyle属性設定します <span style="border-color:red;border-style:solid;border-width:1;"> <input type="checkbox" name="chkBOX22b">Checkbox[22b] </span> ※枠のスタイルの詳細は　 [技c003]テーブル(表)の枠線の種類や色・幅を指定するを参照して下さい。
ボックスの背景色　Checkbox[23a] ボックスと文字の両方の背景色　 Checkbox[23b]	■マウスカーソルを重ねると背景色が変化します ※チェックボックスにマウスを重ねて下さい ◆チェックボックスの背景色 <input type="checkbox" name="chkBOX23a" 　　onmouseover="this.style.background='#80ffff'" 　　onmouseout="this.style.background=''">Checkbox[23a] ◆チェックボックスと文字の両方の背景色 ※チェックボックスと文字を<span>～</span>で囲みます ※背景色は<span～>にstyle属性設定します <span onmouseover="this.style.background='#80ffff'" 　　　　 onmouseout="this.style.background=''"> <input type="checkbox" name="chkBOX23b">Checkbox[23b] </span> ※マウスオンしたとき背景色等が変化する詳細は　[技m004]表のセルにマウスを重ねると背景色・背景画像やフォントが変わるを参照して下さい。

｜topへ｜目次へ｜前へ｜次へ｜

**【技b003-3】チェックボックスをチェックすると背景色が変わる**
チェックボックスの背景色　Checkbox[3a] チェックボックスと文字の背景色　 Checkbox[3b] 　 Checkbox[3c]	■チェックするとチェックボックスの背景色が変わります ※チェックボックスをチェックして下さい
◆手順1【スクリプト】チェックすると背景色が変わる ※<head>～※</head>間に記述します ※複数のチェックボックスで同じスクリプトが使えるようにスクリプトの引数として　　□f:チェックボックスのname属性　　　　　(同一グループでは同じname属性でも差し支えない) 　　　　本例では this と記述する　　□j:背景色を変えるオブジェクトid属性　　　　　(本例示ではspanのid属性) 　　□k:背景色(''で囲む) を、チェックボックスでのスクリプト実行指定毎に指定します -----次の行から(copy)----- <script type="text/javascript"> <!-- function onCheck21(f,j,k) { 　if (f.checked) { 　　　j.style.backgroundColor=k; 　　} 　　else { 　　　 j.style.backgroundColor="" 　　} } //--> </script> -----上の行まで(copy)----- ◆手順2【スクリプトの実行】(チェックボックスと文字の両方の場合) ※<span～>にはid属性を設定します(span毎に異なります) -----次の行から(copy)----- <span id="SP_1"> <input type="checkbox" name="chkBOX3" 　　onclick="onCheck21(this,SP_31,'skyblue')">Checkbox[3b] </span> -----上の行まで(copy)-----

｜topへ｜目次へ｜前へ｜次へ｜

**【技b003-4】チェックボックスをすべてチェックする/チェック数量を調べる**
Checkbox[4a] 　Checkbox[4b] 　Checkbox[4c] 　Checkbox[4d] 　Checkbox[4e]	【1】全部のチェックボックスをすべてチェックする/チェックをはずす　　　すべてチェックする/はずす(交互に) 【2】チェックされている数量を調べる　　　チェックされている数量を表示する【3】指定数量以上チェックされたらアラート(警告)する　　　3ケ以上チェックされたら警告する　　　　　　(3ケ未満の場合は何もしない) 【4】チェックされたチェックボックスのvalue属性を調べる　　　チェックされているチェックボックスのvalue属性の値を表示する　　　　　　(value属性の設定によってはチェックボックス番号等を表示することが可能となります)
■チェックボックスを設置する(例示) ※<form>～</form>に記述します ※name属性は共通にし、value属性はすべて異なる値を設定します (value属性は【技b003-4-4】で使用します) -----次の行から(copy)----- <form name="FORM4"><p></p> 　<input type="checkbox" name="chkBOX4" value="4a">Checkbox[4a] 　<input type="checkbox" name="chkBOX4" value="4b">Checkbox[4b] 　<input type="checkbox" name="chkBOX4" value="4c">Checkbox[4c] 　<input type="checkbox" name="chkBOX4" value="4d">Checkbox[4d] 　<input type="checkbox" name="chkBOX4" value="4e">Checkbox[4e] </form> -----上の行まで(copy)----- ■【技b003-4-1】全部のチェックボックスをすべてチェックする/チェックをはずす ◆手順1【スクリプト】チェックすると背景色が変わる ※<head>～※</head>間に記述します -----次の行から(copy)----- <script type="text/javascript"> <!-- function onCheck41() { 　var CheckB=5; //チェックボックス数　var m=CheckB-1; 　if (document.FORM4.elements[0].checked) { 　　for (i=0;i<=m;i++) { 　　　　document.FORM4.elements[i].checked=false; 　　} 　} 　else { 　　for (i=0;i<=m;i++) { 　　　document.FORM4.elements[i].checked=true; 　　} 　} } //--> </script> -----上の行まで(copy)----- ◆手順2【スクリプトの実行】リンク文字から実行 -----次の行から(copy)----- <a href="javascript://" onclick="onCheck41()">すべてチェックする/はずす(交互に)</a> -----上の行まで(copy)----- 【技b003-4-2】チェックされている数量を調べる ◆手順1【スクリプト】 ※<head>～※</head>間に記述します -----次の行から(copy)----- <script type="text/javascript"> <!-- function onCheck42() { var n=0; var CheckB=5; //チェックボックス数 var m=CheckB-1; 　for (i=0;i<=m;i++) { 　　if (document.FORM4.elements[i].checked) { 　　　n=n+1; 　　} 　} alert("チェックされているチェックボックスは[" + n +"]ケです") } //--> </script> -----上の行まで(copy)----- ◆手順2【スクリプトの実行】リンク文字から実行 -----次の行から(copy)----- <a href="javascript://" onclick="onCheck42()">チェックされている数量を表示する</a> -----上の行まで(copy)----- 【技b003-4-3】指定数量以上チェックされたらアラート(警告)する ◆手順1【スクリプト】 ※<head>～※</head>間に記述します ※スクリプトonCheck43(k)　　k:警告を発する数量(<チェックボックス数) -----次の行から(copy)----- <script type="text/javascript"> <!-- function onCheck43(k) { var n=0; var CheckB=5; //チェックボックス数 var m=CheckB-1; 　for (i=0;i<=m;i++) { 　　if (document.FORM4.elements[i].checked) { 　　　n=n+1; 　　} 　} 　if (n>=k) { 　　alert("チェックされているチェックボックスは[" + n +"]ケです。[" + k +"]ケ以上チェックできません。") 　} } //--> </script> -----上の行まで(copy)----- ◆手順2【スクリプトの実行】リンク文字から実行 -----次の行から(copy)----- <a href="javascript://" onclick="onCheck43(3)">3ケ以上チェックされたら警告する</a> -----上の行まで(copy)----- 【技b003-4-4】チェックされたチェックボックスのvalue属性を調べる ◆手順1【スクリプト】 ※<head>～※</head>間に記述します ※チェックされたチェックボックスに設定したvalue属性の値を表示します -----次の行から(copy)----- <script type="text/javascript"> <!-- function onCheck44() { 　var n=0; 　var CheckB=5; //チェックボックス数　var m=CheckB-1; 　var SelectValue="選択されたチェックボックスの値(value)は\n"; 　for (i=0;i<=m;i++) { 　　if (document.FORM4.elements[i].checked) { 　　　n=n+1; 　　　SelectValue= SelectValue + "[" + document.FORM4.elements[i].value + "]"; 　　} 　} 　if (n==0) { 　　SelectValue="チェックボックスは選択されていません"; 　　alert(SelectValue); 　} 　else{ 　　alert(SelectValue + "(合計 " + n + ")ケです。"); 　} } //--> </script> -----上の行まで(copy)----- ◆手順2【スクリプトの実行】リンク文字から実行 -----次の行から(copy)----- <a href="javascript://" 　onclick="onCheck44()">チェックされているチェックボックスのvalue属性の値を表示する</a> -----上の行まで(copy)-----

｜topへ｜目次へ｜前へ｜次へ｜

**【技b003-5】チェックボックスの文字をクッリクしてもチェックできる**
一般型　 Checkbox[5a] 　ちょっと工夫　 Checkbox[5a]	文字をクリックしてもチェックボックスがチェックができます ■一般型 ※文字がリンク文字なので、マウスカーソルの形が｢ハンド(手)｣で下線がついています ※文字にマウスカーソルを乗せると｢赤く・太字｣になりますが、これはファイル全体にリンク文字のスタイルシート設定をしていることによるものでスタイル設定していなければ変わりません。 ■ちょっと工夫 ※通常のリンクと多少異なるので、マウスカーソルの形を｢矢印｣に変更し下線を消しました
◆手順1【スクリプト】 ※<head>～※</head>間に記述します -----次の行から(copy)----- <script type="text/javascript"> <!-- function onCheck51(g) { 　if (document.FORM5.elements[g].checked) { 　　　document.FORM5.elements[g].checked=false; 　　} 　else { 　　　document.FORM5.elements[g].checked=true; 　} } //--> </script> -----上の行まで(copy)----- ◆手順2【スクリプトの実行】リンク文字から実行 ※スクリプトonCheck51()には、引数としてチェックボックスのエレメント番号(0から始まる整数)を渡します -----次の行から(copy)----- <input type="checkbox" name="chkBOX5"> <a href="javascript://" onclick="onCheck51(0)">Checkbox[5a]</a> -----上の行まで(copy)----- ◆手順2-2【スクリプトの実行】ちょっと工夫 ※カーソルの形を変える　　<style="cursor:default";> ※リンク文字の下線を消す　　<style="text-decoration:none;";> -----次の行から(copy)----- <input type="checkbox" name="chkBOX5"> <a href="javascript://" onclick="onCheck51(1)" 　　style="cursor:default;text-decoration:none;";>Checkbox[5a]</a> -----上の行まで(copy)-----

｜topへ｜目次へ｜前へ｜次へ｜

**【技b003-6】チェックボックスの使用可能/使用不可を切り換える**
Checkbox[6a] 　Checkbox[6b]	下記のリンク文字をクリックして下さい　　Checkbox[6a]を使用可能に / 使用不可に　　Checkbox[6b]を使用可能に / 使用不可に ※使用不可の場合は文字がチェックボックスが薄い灰色に転します ※上記の例ではカーソルの形を変更しています
◆手順1【チェックボックスを設置】 -----次の行から(copy)----- <form name="FORM6"> 　<input type="checkbox" name="chkBOX6">Checkbox[6a] 　<input type="checkbox" name="chkBOX6">Checkbox[6b] </form> -----上の行まで(copy)----- ◆手順2【html&スクリプト】 ※クリックすると使用不可にする　onclick="FORM6.elements['chkBOX6'][0].disabled=false;" 　　　(formのname属性).elements['(チェックボックスのname属性)'][(エレンメント番号)].disabled=... 　　　false:使用不可 true:使用可能 -----次の行から(copy)----- Checkbox[6a]を <a href="javascript://" 　onclick="FORM6.elements['chkBOX6'][0].disabled=false; 　　　　　　　FORM6.elements['chkBOX6'][0].style.cursor='default';"> 　使用可能に</a> / <a href="javascript://" 　onclick="FORM6.elements['chkBOX6'][0].disabled=true; 　　　　　　　FORM6.elements['chkBOX6'][0].style.cursor='not-allowed';"> 　使用不可に</a> Checkbox[6b]を <a href="javascript://" 　onclick="FORM6.elements['chkBOX6'][1].disabled=false; 　　　　　　　FORM6.elements['chkBOX6'][1].style.cursor='default';"> 　使用可能に</a> / <a href="javascript://" 　onclick="FORM6.elements['chkBOX6'][1].disabled=true; 　　　　　　　FORM6.elements['chkBOX6'][1].style.cursor='not-allowed';"> 　使用不可に</a> -----上の行まで(copy)-----

｜topへ｜目次へ｜前へ｜次へ｜

**【技b003-7】特定のチェックボックスがチェックされているときのみスクリプトを実行する**
<form>～</form> 　Checkbox[71a] 　Checkbox[71b] 　id属性指定　Checkbox[72]	チェックボックスをチェックして、下記のリンク文字をクリックして下さい　　Checkbox[71a]がチェックされているとスクリプト実行します　　Checkbox[72a]がチェックされているとスクリプト実行します　　Checkbox[72]がチェックされているとスクリプト実行します ※所定のチェックボックスがチッェクされていなければスクリプト実行しません
■<form>～</form>に複数設置した場合 ※<form>にはname属性を設定します ※複数のチェックボックスのname属性は同じです ◆手順1【チェックボックスを設置】 -----次の行から(copy)----- <form name="FORM7"> 　<input type="checkbox" name="chkBOX71">Checkbox[71a] 　<input type="checkbox" name="chkBOX71">Checkbox[71b] </form> -----上の行まで(copy)----- ◆手順2【html&スクリプト】 ※チェックボックスがチェックされているときのみスクリプト実行します ※if文を直接タグの中に書き込みます ※実行するスクリプトはfunction～で記述したスクリプトでもかまいません ◇同一form内に複数のチェックボックスname属性が存在する場合 -----次の行から(copy)----- Checkbox[71a]がチェックされていると <a href="javascript://" onclick="if(FORM7.elements['chkBOX71'][0].checked){alert('スクリプト実行事例(1a)')}">スクリプト実行</a> -----上の行まで(copy)----- ◇同一form内にチェックボックスname属性がひとつだけの場合 ※elements['(チェックボックスのname属性)'][1]～の['(チェックボックスのname属性)']が省略可能です -----次の行から(copy)----- Checkbox[71b]がチェックされていると <a href="javascript://" onclick="if(FORM7.elements[1].checked){alert('スクリプト実行事例(1b)')}">スクリプト実行</a> -----上の行まで(copy)----- ■チェックボックスを単独で設置した場合(id属性設定) ※チェックボックスを単独で使用する場合には※<form>～</form>に設置する必要はありません ※チェックボックスにはid属性を設定します ◆手順1【チェックボックスを設置】 -----次の行から(copy)----- 　<input type="checkbox" id="chkBOX72">Checkbox[72] -----上の行まで(copy)----- ◆手順2【html&スクリプト】 ※チェックボックスがチェックされているときのみスクリプト実行します ※if文を直接タグの中に書き込みます ※実行するスクリプトはfunction～で記述したスクリプトでもかまいません -----次の行から(copy)----- Checkbox[72]がチェックされていると <a href="javascript://" onclick="if(chkBOX72.checked){alert('スクリプト実行事例(2)')}">スクリプト実行</a> -----上の行まで(copy)-----

｜topへ｜目次へ｜前へ｜

解説等

◆<form>～</ form>間にチェックボックスが複数ある場合は、id属性やname属性でなく[0]から始まるelement番号で識別します
※ラジオボタンも同様です
※但し、単独で使用する場合は<form>を使用せずid属性での識別が可能です(【技B003-7】)

keyword

◇input◇type◇checkbox◇elements

history

◇(2004.11.27)【技b003-7】を追加しました
◇(2004.11.14)設置

注意

◆操作MENUの[Window Resize]を選択するとウィンドウサイズが変更可能です。
◆上記の[web技]をクリップボードにコピーしテキストエディタに貼り付けて使用する場合は、表示のための改行記号や全角・半角スペースの記号等を削除して下さい。
-----次の行から(copy)-----
(この部分をクリップボードにコピーしてテキストエディタ等に貼り付けて下さい)
-----上の行まで(copy)-----