DOJEUN's Notepad
 LISTへ 

【Javascript】チェックボックスを一括で選択したり外したりする

チェックボックスを一括で選択したり外したりするコード

<html>
<head><title></title>
<script type="text/javascript">
<!--
/*
* 同じ名前のチェックボックスをチェック/非チェックする。
*/
function fncAllCheck(){
var chkTF;
	if(frm1.chkAll.checked==true){
		chkTF = true;
	}else{
		chkTF = false;
	}

	for(var i=0; i < frm1.chk.length; i++){
		frm1.chk[i].checked = chkTF;
	}
}

/*
* それぞれ違う名前のチェックボックスをチェック/非チェックする。
* :chkAll以外のチェックボックスをチェック/非チェックする。
*/
function fncAllCheck2(){
var chkTF;
var inputs;

	if(frm2.chkAll.checked==true){
		chkTF = true;
	}else{
		chkTF = false;
	}

	inputs = frm2.getElementsByTagName('input');

	for(var i=0; i < inputs.length; i++){
		var input = inputs[i];
		if(input.type == "checkbox" << input.name!="chkAll"){
			input.checked = chkTF;
		}
	}
}
//-->
</script>
</head>
<body>
<form name="frm1">
<table border="1">
	<tr><td bgcolor="blue"><font color="white">【同じ名前のチェックボックス】</font></td></tr>
	<tr><td bgcolor="#DCDCDC"><input type="checkbox" name="chkAll" value="all" onclick="fncAllCheck()"/>All Check</td></tr>
	<tr><td><input type="checkbox" name="chk" value="1" />a</td></tr>
	<tr><td><input type="checkbox" name="chk" value="2" />b</td></tr>
	<tr><td><input type="checkbox" name="chk" value="3" />c</td></tr>
	<tr><td><input type="checkbox" name="chk" value="4" />d</td></tr>
	<tr><td><input type="checkbox" name="chk" value="5" />e</td></tr>
</table>
</form>

<form name="frm2">
<table border="1">
	<tr><td bgcolor="blue"><font color="white">【違う名前のチェックボックス】</font></td></tr>
	<tr><td bgcolor="#DCDCDC"><input type="checkbox" name="chkAll" value="all" onclick="fncAllCheck2()"/>All Check</td></tr>
	<tr><td><input type="checkbox" name="chk1" value="1" />a</td></tr>
	<tr><td><input type="checkbox" name="chk2" value="2" />b</td></tr>
	<tr><td><input type="checkbox" name="chk3" value="3" />c</td></tr>
	<tr><td><input type="checkbox" name="chk4" value="4" />d</td></tr>
	<tr><td><input type="checkbox" name="chk5" value="5" />e</td></tr>
</table>
</form>
</body>
</html>