* JQuery を使わずに、全選択・全解除を JavaScript で、実装する
サンプル
* ポイントは、全選択対象のname(例だと「name="targetA"」)を同じにする
<html>
<head>
<script language="Javascript">
function SelectAll() {
var isChecked = document.sampleForm.selectAll.checked;
for(i = 0; i < document.sampleForm.targetA.length; i++){
document.sampleForm.targetA[i].checked = isChecked;
}
}
</script>
</head>
<body>
<form name="sampleForm" action=".">
<input type="checkbox" name="selectAll" onClick="SelectAll()">全選択・全解除<br>
<input type="checkbox" name="targetA"><br>
<input type="checkbox" name="targetA"><br>
<input type="checkbox" name="targetA"><br>
<input type="checkbox" name="targetA"><br>
</form>
</body>
</html>
注意1 : inputタグが一つの場合
* inputタグ(上記の例だと「<input type="checkbox" name="targetA">」がPHPなどで、動的に作成している場合、
inputタグが一つになってしまったら、上記のJavaScriptが動かなくなるので注意。
サンプル:選択が一つの場合
* ただ、こうなった場合は、全選択・全解除はいらねーだろって話になりそうだが
<html>
<head>
<script language="Javascript">
function SelectAll() {
var isChecked = document.sampleForm.selectAll.checked;
<!-- ★ここ★ 配列ではなくなるので、動かなくなることに注意 -->
document.sampleForm.targetA.checked = isChecked;
}
</script>
</head>
<body>
<form name="sampleForm" action=".">
<input type="checkbox" name="selectAll" onClick="SelectAll()">全選択・全解除<br>
<input type="checkbox" name="targetA"><br>
</form>
</body>
</html>
注意2 : inputタグの一部が非活性の場合
* inputタグの一部が非活性(disabled)場合でも、
上記のサンプルだとチェックが付く/外れてしまう。(対応が必要)
サンプル:非活性対応版
* disabledだったら、処理を飛ばしている
<html>
<head>
<script language="Javascript">
function SelectAll() {
var isChecked = document.sampleForm.selectAll.checked;
for(i = 0; i < document.sampleForm.targetA.length; i++){
// ★ここを追加した★
if (document.sampleForm.targetA[i].disabled) {
continue;
}
document.sampleForm.targetA[i].checked = isChecked;
}
}
</script>
</head>
<body>
<form name="sampleForm" action=".">
<input type="checkbox" name="selectAll" onClick="SelectAll()">全選択・全解除<br>
<input type="checkbox" name="targetA" disabled><br>
<input type="checkbox" name="targetA" ><br>
<input type="checkbox" name="targetA" disabled checked><br>
<input type="checkbox" name="targetA"><br>
</form>
</body>
参考文献
http://chaichan.lolipop.jp/qa6500/qa6823.htm