selectメニューによるチェックボックスの表示・非表示
リストメニューで選択された項目がアクティブになるようなフォームを作成したいと考えています。
下記コードの上部チェックボックスがselectメニューになっているようなものです。
JavaScriotに関して未熟者ですので、どなたか参考になるご意見／回答を頂けませんでしょうか？宜しくお願いいたします。
<html>
<head>
<title></title>
<script type="text/javascript">
<!--
// 制御用フラグ
// 0なら対象グループは無効(disabled)、1以上なら有効
var FLAG = {
'A':0,
'B':0,
'C':0,
'E':0
};
// 初期化
window.onload = function(){
var controlList = document.getElementById('ctr_FLAG').getElementsByTagName('input');
for(var i=0;controlList[i];i++){
if(controlList[i].checked){
var nameList = controlList[i].value.split(/,/);
for(var j=0;nameList[j];j++){
FLAG[ nameList[j] ]++;
}
}
}
for(var x in FLAG) {
fchk2_sub(x);
}
}
// チェックが変更されたら
function fchk2(obj) {
nameList = obj.value.split(/,/);
for(var i=0;nameList[i];i++) {
if(obj.checked) {
FLAG[nameList[i]]++;
} else {
FLAG[nameList[i]]--;
}
fchk2_sub(nameList[i]);
}
}
// disableの変更
function fchk2_sub(groupe_name,dsiabled_value){
var inputList = document.getElementById('gr_'+groupe_name).getElementsByTagName('input');
for(var i=0;inputList[i];i++) {
inputList[i].disabled = FLAG[groupe_name]>0?false:true;
}
}
//-->
</script>
</head>
<body>
<form name='form2' action='#'>
<p id="ctr_FLAG">
<input type='checkbox' name='chk1' value='A' onclick='fchk2(this)' >
Aをアクティブに<br>
<input type='checkbox' name='chk1' value='A,B' onclick='fchk2(this);' >
AとBをアクティブに<br>
<input type='checkbox' name='chk1' value='A,B,C' onclick='fchk2(this);'>
AとBとCをアクティブに<br>
<input type='checkbox' name='chk12' value='A,B,C,E' onclick='fchk2(this);'>
AとBとCとDをアクティブに</p>
<p>=====================</p>
<p id="gr_A">
<input type='checkbox' name='a1' value='1'> 選択肢A<br>
<input type='checkbox' name='a2' value='1'> 選択肢A<br>
<input type='checkbox' name='a3' value='1'> 選択肢A<br>
</p>
<p id="gr_B">
<input type='checkbox' name='b1' value='1'> 選択肢B<br>
<input type='checkbox' name='b2' value='1'> 選択肢B<br>
<input type='checkbox' name='b3' value='1'> 選択肢B<br>
</p>
<p id="gr_C">
<input type='checkbox' name='c1' value='1'> 選択肢C<br>
<input type='checkbox' name='c2' value='1'> 選択肢C<br>
<input type='checkbox' name='c3' value='1'> 選択肢C<br>
</p>
<p id="gr_E">
<input type='checkbox' name='e1' value='1'> 選択肢E<br>
<input type='checkbox' name='e2' value='1'> 選択肢E<br>
<input type='checkbox' name='e3' value='1'> 選択肢E
</p>
</form>
</body>
</html>
