※ ChatGPTを利用し、要約された質問です（原文：チェックボックスの全選択・全解除を一つにまとめたい）
チェックボックスの全選択・全解除を一つにまとめる方法
このQ&Aのポイント
チェックボックスの全選択・全解除を一つにまとめる方法について教えてください。
チェックボックスの全選択・全解除を一つにしたいです。具体的には、最初に表示されるボタンは「全て選択」のみで、クリックすると「全て解除」ボタンに変わります。また、再度クリックすると再び「全て選択」ボタンに変わるような仕組みです。
以上のような仕組みを実現するためのソースコードを教えてください。
チェックボックスの全選択・全解除を一つにまとめたい
http://shoyu-ramen23.jugem.jp/?eid=184を参考にチェックボックスの全選択・全解除をつけました。
ただし、上記のサンプルは全選択ボタン、全解除ボタンと二つに分かれている為、これを一つにしたいと思ったのですが、どうすればできるかわからなかったので、
アドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。
【やりたい事】
1. 最初は「全て選択」ボタンのみ表示したいです。
2. 「全て選択」ボタンをクリックすると、「全て選択」ボタンが消え、代わりに「全て解除」ボタンを表示したいです(1回目,3回目,5回目・・・のクリックはこの動作)。
2. 「全て解除」ボタンをクリックすると、「全て解除」ボタンが消え、代わりに「全て選択」ボタンを表示したいです(2回目,4回目,6回目・・・のクリックはこの動作)。
【ソースコード】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>タイトル</title>
<script type="text/javascript">
function allcheck(targetForm,flag){
for(n=0;n<=targetForm.length-1;n++){
if(targetForm.elements[n].type == "checkbox"){
targetForm.elements[n].checked = flag;
}
}
}
</script>
</head>
<body>
<form action="test.php" method="post">
<table>
<tr>
<td>
<input type="button" onclick="allcheck(this.form,true)" value="全て選択"><br />
<input type="button" onclick="allcheck(this.form,false)" value="全て解除"></td>
</tr>
<tr>
<td><input type="checkbox" value="1" id="check1" name="data[check1]"></td>
</tr>
<tr>
<td><input type="checkbox" value="1" id="check2" name="data[check2]"></td>
</tr>
<tr>
<td><input type="checkbox" value="1" id="check3" name="data[check3]"></td>
</tr>
<tr>
<td><input type="checkbox" value="1" id="check4" name="data[check4]"></td>
</tr>
<tr>
<td><input type="checkbox" value="1" id="check5" name="data[check5]"></td>
</tr>
</table>
</form>
</body>
</html>
以上、よろしくお願いします。
お礼
ご回答ありがとうございます。 ご教示いただいたソースで意図した動作になりました。 このたびはどうもありがとうございました。