チェックボックス制御2つ以上併記したい
http://oshiete.goo.ne.jp/qa/6906994.html
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”>
<html lang=”ja”>
<head><title>sample</title>
<meta http-equiv=”Content-Script-Type” content=”text/javascript”>
<script type=”text/javascript”>
<!–
function hoge(evt){
//それぞれのグループのチェック許容数最大値
var limit ={ “group1”:1, “group2”:2, “group3″:3 };
var t = evt.target || evt.srcElement;
var cnt=0, p = t.parentNode;
var elm, e, i, max;
if(t.nodeName!=”INPUT” || t.type!=”checkbox” ||
!t.checked || !(max=limit[p.id])) return;
elm = p.getElementsByTagName(“input”);
for(i=0; e=elm[i++];)
if(e.type==”checkbox” && e.checked) cnt++;
if(cnt>max){
t.checked = false;
alert(“チェックは” + max + “個まで”);
}
}
//–>
</script>
</head>
<body>
<form action=”#” onClick=”hoge(event)”>
<fieldset id=”group1″>
<legend>group1</legend>
<input type=”checkbox” value=”0″ name=”a_1″ checked>a_1
<input type=”checkbox” value=”1″ name=”a_2″>a_2
<input type=”checkbox” value=”2″ name=”a_3″>a_3
<input type=”checkbox” value=”3″ name=”a_4″>a_4
</fieldset>
<fieldset id=”group2″>
<legend>group2</legend>
<input type=”checkbox” value=”0″ name=”b_1″ checked>b_1
<input type=”checkbox” value=”1″ name=”b_2″>b_2
<input type=”checkbox” value=”2″ name=”b_3″>b_3
<input type=”checkbox” value=”3″ name=”b_4″>b_4
</fieldset>
<fieldset id=”group3″>
<legend>group3</legend>
<input type=”checkbox” value=”0″ name=”c_1″ checked>c_1
<input type=”checkbox” value=”1″ name=”c_2″>c_2
<input type=”checkbox” value=”2″ name=”c_3″>c_3
<input type=”checkbox” value=”3″ name=”c_4″>c_4
</fieldset>
</form>
</body>
</html>
＜その2＞
<html>
<head>
<script language=”javascript” type=”text/javascript”>
function autochk(p,name){
var f = p.form;
var el;
for(var prop in f){
if(prop.toString().substr(0,2)==name){//名前がname(‘ko’)で始まるもの
el=f.elements[prop];
if(el.type==”checkbox”){//このチェックは省略してもいいかも
el.disabled = !p.checked;
}
}
}
}
</script>
</head>
<body>
<form id=”query” name=”query”>
<input type=”checkbox” name=”oya” value=”1″ checked checked onclick=”autochk(this,’ko’);”>親
<input type=”checkbox” name=”ko1″ id=”ko1″ value=”1″ checked>子1
<input type=”checkbox” name=”ko2″ id=”ko2″ value=”1″ checked>子2
<input type=”checkbox” name=”ko3″ id=”ko3″ value=”1″ checked>子3
<input type=”checkbox” name=”ko4″ id=”ko4″ value=”1″ checked>子4
<input type=”text” name=”other” value=”その他”>
</form>
</body>
</html>
＜その2＞
<html>
<head>
<script language=”javascript” type=”text/javascript”>
function autochk(f){
for(var i=0;i<f.form.length;i++){
if (f.form.elements[i].className==”ko”){f.form.elements[i].disabled = !f.checked;}
}
}
</script>
</head>
<body>
<form>
<input type=”checkbox” name=”oya” value=”1″ checked onclick=”autochk(this);”>親
<input type=”checkbox” name=”ko1″ value=”1″ checked>子1
<input type=”checkbox” name=”ko2″ value=”1″ checked>子2
<input type=”checkbox” name=”ko3″ value=”1″ checked>子3
<input type=”checkbox” name=”ko4″ value=”1″ checked>子4
<input type=”checkbox” name=”other” value=”1″ checked>他
</form>
</body>
</html>