チェックボックスの全選択、全解除ができません

Question

###前提・実現したいこと
チェックボックスを全選択・全解除できるようにしたいです。

###発生している問題・エラーメッセージ
全選択にできません。

エラーメッセージ

###該当のソースコード

<script type="text/javascript" >

function AllChecked(target){
	var check= target.checked;
	var len = document.forms["form1"].selchk[].length;
  for (var i = 0; i < len ; i++){
    document.forms["form1"].selchk[i].checked=check;
  }
}

</script>

	echo  "<tr>";
	echo  "<td><input type=checkbox name=selchk[] value=".$i." ".$cheched."></td>";
	echo  "<td>".$i."</td>";
	//echo  "<td>".$row["formula"]."</td>";
	echo  "<td><input type=text name=formula value=".$db_formula.">";
	echo  "<td>".$db_answer."</td>";
	echo  $db_odd_even;
	echo  "<td>".$db_created."</td>";
	echo  "<td>".$db_updated."</td>";
	echo  "</tr>\n";

###試したこと
checkboxのnameを配列にしなければ全選択できました。

###補足情報(言語/FW/ツール等のバージョンなど)
チェックボックスごとに異なる値を得たいです。
phpにhtmlを埋め込んでおりまして、for文でチェックボックスをDBのレコードの数だけ表示しようとしております。

Comments

[kei344]

HTMLは回答者が再現できるように出力されたHTMLのtable部分を提示してください。

Answer 1

ひとまず簡単なサンプルを作りました。関数に組み込んでみてください。

<input type="checkbox" name="selchk[]" value="1">
<input type="checkbox" name="selchk[]" value="2">
<input type="checkbox" name="selchk[]" value="3">

var input = document.querySelectorAll('[name="selchk[]"]');
var len = input.length;

for(var i = 0; i < len; i++){
  input[i].checked = true;
}

Comments

[t.d_prog]

ご回答ありがとうございます。
全選択ができるようになりました。
全解除ができないのですが、ifで条件分岐持たせると可能でしょうか？

[yamato_hikawa]

そうですね。条件分岐させて、その時は処理を input[i].checked = false; にすれば良いと思います。

[yambejp]

forms["form1"].selchk[i]も直していないんじゃないでしょうかね？
あくまでもforms["form1"].elements["selchk[]"]を前提に処理してください

[yambejp]

sorry！返答場所を間違えました

[t.d_prog]

ありがとうございます。
解決しそうです。

Answer 2

せめて
document.forms["form1"].selchk[]
↓↓↓
document.forms["form1"].elements["selchk[]"]

#追記
それを踏まえた上でこれでどうでしょう？
（target.checkedがなにやりたいのかわからないので修正してあります）

function AllChecked(check){
  var len = document.forms["form1"].elements["selchk[]"].length;
  for (var i = 0; i < len ; i++){
    document.forms["form1"].elements["selchk[]"][i].checked=check;
  }
}

<form name="form1">
<input type="button" value="on" onclick="AllChecked(true)";>
<input type="button" value="off" onclick="AllChecked(false)";>
<input type=checkbox name=selchk[] value="1"><br>
<input type=checkbox name=selchk[] value="2"><br>
<input type=checkbox name=selchk[] value="3"><br>
</form>

追記2

1つのチェックボックスでほかを処理するならこう

function AllChecked(target){
  var check=target.checked;
  var len = document.forms["form1"].elements["selchk[]"].length;
  for (var i = 0; i < len ; i++){
    document.forms["form1"].elements["selchk[]"][i].checked=check;
  }
}

<form name="form1">
<input type=checkbox onchange="AllChecked(this)">ALL<br>
<input type=checkbox name="selchk[]" value="1">1<br>
<input type=checkbox name="selchk[]" value="2">2<br>
<input type=checkbox name="selchk[]" value="3">3<br>
</form>

Comments

[t.d_prog]

ご回答ありがとうございます。
初歩的な点を見逃しておりました。
ご指摘ありがとうございます。
上記のようにやってみましたのですが上手くいきませんでした。

[yambejp]

forms["form1"].selchk[i]も直していないんじゃないでしょうかね？
あくまでもforms["form1"].elements["selchk[]"]を前提に処理してください
（別スレに書いちゃいました、失礼しました）

[t.d_prog]

ご返事ありがとうございます。
また、回答の編集していただきましてありがとうございます。
こちらですとon/offの二つのボタンで切り替える方法になります。
1つのチェックボックスの切り替えで全選択/全解除を目標としております。
説明が至りませんでした。申し訳ございません。

[yambejp]

解決したみたいですが、チェックボックスから全変更する方法を追記しておきました