<!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>
<TITLE>チェックボックスのチェックの有無とチェックの数を調べます</TITLE>
<script type="text/javascript">
<!--
function Mycnt() {
var Myobj = document.getElementById("Mychk"); // id名が "Mychk"内のオブジェクトを Myobj に格納
var Mytag = Myobj.getElementsByTagName("input"); // Myobj 内の "input"タグ要素を格納
var chksuu = 0; //チェックの数のカウンタ
var Myvalue=""; //空白の文字列
for (var i = 0; i < Mytag.length; i ++) { //Mytag.length; チェックボックスの数
if (Mytag[i].checked == true) { //checked == trueであればチェック有り
Myvalue += Mytag[i].value;//チェックのあるMytag[i] のvalue値の結合
chksuu ++; // trueであれば １ずつ加算します
}
}
if (chksuu > 0) { //チェックがある時のメッセージです
msg = "あんたのチェックした数は " + chksuu + "個やで";
}
else { //チェックがない時のメッセージです
msg = "あんたのチェックした数は0個やで";
}
document.getElementById("tBox").innerHTML=msg; // メッセージを"tBox"に書き込みます
}
All_Items = new Array("check1","check2","check3","check4","check5","check6","check7","check8","check9","check10","check11"); // 処理対象項目名
function Check_default(){ // デフォルトに戻します
for(i in All_Items){
document.Various.elements[All_Items[i]].checked = document.Various.elements[All_Items[i]].defaultchecked;
msg = "あんたのチェックした数は0個やで";
document.getElementById("tBox").innerHTML=msg; // メッセージを"tBox"に書き込みます
document.getElementById('ibox01').style.display = "none";
document.getElementById('ibox02').style.display = "none";
document.getElementById('ibox03').style.display = "none";
document.getElementById('ibox04').style.display = "none";
}
}
function Check_hantei(){ // 画像表示
var MyImg = document.getElementById("kekka");
var Myobj = document.getElementById("Mychk"); // id名が "Mychk"内のオブジェクトを Myobj に格納
var Mytag = Myobj.getElementsByTagName("input"); // Myobj 内の "input"タグ要素を格納
var chksuu = 0; //チェックの数のカウンタ
var Myvalue=""; //空白の文字列
for (var i = 0; i < Mytag.length; i ++) { //Mytag.length; チェックボックスの数
if (Mytag[i].checked == true) { //checked == trueであればチェック有り
Myvalue += Mytag[i].value;//チェックのあるMytag[i] のvalue値の結合
chksuu ++; // trueであれば １ずつ加算します
}
}
if (chksuu >= 0 && chksuu <= 2) { //チェックが0~2個ある時のメッセージです
document.getElementById('ibox01').style.display = "";
document.getElementById('ibox02').style.display = "none";
document.getElementById('ibox03').style.display = "none";
document.getElementById('ibox04').style.display = "none";
}
else if (chksuu >= 2 && chksuu <= 5) { //チェックが2~5個ある時のメッセージです
document.getElementById('ibox01').style.display = "none";
document.getElementById('ibox02').style.display = "";
document.getElementById('ibox03').style.display = "none";
document.getElementById('ibox04').style.display = "none"; }
else if (chksuu >= 5 && chksuu <= 8) { //チェックが5~8個ある時のメッセージです
document.getElementById('ibox01').style.display = "none";
document.getElementById('ibox02').style.display = "none";
document.getElementById('ibox03').style.display = "";
document.getElementById('ibox04').style.display = "none";
}
else { //チェックが9~12個ある時のメッセージです
document.getElementById('ibox01').style.display = "none";
document.getElementById('ibox02').style.display = "none";
document.getElementById('ibox03').style.display = "none";
document.getElementById('ibox04').style.display = "";
}
}
// -->
</script>
</HEAD>
<BODY>
<p>チェックを入れてください。</p>
<form name="Various" id="Mychk">
<input type="checkbox" value="1" onclick="Mycnt()" name="check1">1
<input type="checkbox" value="2" onclick="Mycnt()" name="check2">2
<input type="checkbox" value="3" onclick="Mycnt()" name="check3">3
<input type="checkbox" value="4" onclick="Mycnt()" name="check4">4
<input type="checkbox" value="5" onclick="Mycnt()" name="check5">5
<input type="checkbox" value="6" onclick="Mycnt()" name="check6">6
<input type="checkbox" value="7" onclick="Mycnt()" name="check7">7
<input type="checkbox" value="8" onclick="Mycnt()" name="check8">8
<input type="checkbox" value="9" onclick="Mycnt()" name="check9">9
<input type="checkbox" value="10" onclick="Mycnt()" name="check10">10
<input type="checkbox" value="11" onclick="Mycnt()" name="check11">11
<input type="button" value="リセット" onClick="Check_default()" />
<input type="button" value="判定する" onClick="Check_hantei()" />
</form>
<br/>
<div id="tBox">あんたのチェックした数は0個やで</div>
<div id="ibox01" style="display:none"><img id="kekka" src="img/ouji.gif" /></div>
<div id="ibox02" style="display:none"><img id="kekka" src="img/oujyo.gif"/></div>
<div id="ibox03" style="display:none"><img id="kekka" src="img/ohhi.gif"/></div>
<div id="ibox04" style="display:none"><img id="kekka" src="img/ousama.gif"/></div>
</BODY>
</HTML>
最終更新：2010年08月31日 01:24
