チェックボックスの操作

　全てのチェックボックスにチェックを入れる、チェックを解除する、チェックの反転を行うためのボタンの設置法です。

　次のような5つのチェックボックス（フォームの名前はfm、チェックボックスの名前はそれぞれchk1、chk2、chk3、chk4、chk5）のあるフォームを例にします。

<form name="fm" action="enquete.cgi" method="post">

<p>悪いのは誰だ！？</p>

<p><input type="checkbox" name="chk1" value="1">猫</p>

<p><input type="checkbox" name="chk2" value="2">箱</p>

<p><input type="checkbox" name="chk3" value="3">毒ガス</p>

<p><input type="checkbox" name="chk4" value="4">物理学者</p>

<p><input type="checkbox" name="chk5" value="5">放射性原子核</p>

<p><input type="submit" value="送信"></p>

</form>

　まず、次のコードを<head>～</head>に貼り付けてください。そして、"fm"の部分をフォームの名前、"chk1"～"chk5"をそれぞれチェックボックスの名前に書き換えてください。

<script type="text/javascript">
<!--
/* 全てにチェックを入れる */
function checkAll(){
    document.fm.chk1.checked = true;
    document.fm.chk2.checked = true;
    document.fm.chk3.checked = true;
    document.fm.chk4.checked = true;
    document.fm.chk5.checked = true;
}
/* チェックを全て解除 */
function releaseAll(){
    document.fm.chk1.checked = false;
    document.fm.chk2.checked = false;
    document.fm.chk3.checked = false;
    document.fm.chk4.checked = false;
    document.fm.chk5.checked = false;
}
/* 全てのチェックを反転 */
function reverseAll(){
    document.fm.chk1.checked = document.fm.chk1.checked ? false : true;
    document.fm.chk2.checked = document.fm.chk2.checked ? false : true;
    document.fm.chk3.checked = document.fm.chk3.checked ? false : true;
    document.fm.chk4.checked = document.fm.chk4.checked ? false : true;
    document.fm.chk5.checked = document.fm.chk5.checked ? false : true;
}
//-->
</script>

　次に、それぞれの動作に対応するボタンを設置してください。

<input type="button" value="全てにチェックを入れる" onclick="checkAll()">

<input type="button" value="チェックを全て解除" onclick="releaseAll()">

<input type="button" value="全てのチェックを反転" onclick="reverseAll()">