セレクトボックス の 選択規制

質問

今、フォームで入力画面を作っています。
その中にセレクトボックスが４つアリ、現在「未選択」の場合エラーチェックをするようにしています。
そして、ここにもうひとつのチェックを追加したいのですが皆目見当が付きません・・・

条件　kaikai、bunkai1、bunkai2、heikai　
全てが不参加の場合
"参加する会を最低一つは選択してください。"と言うコメントをだすというものです。
皆様よろしくお願いいたします。

********　　現在の JavaScript　　*********
<SCRIPT language="JavaScript">
<!--
//フォームチェック

function fcheck() {
if(document.form1.kaikai.value == "未選択")
{
window.alert("選択してください");
return false;
}

if(document.form1.bunkai1.value == "未選択")
{
window.alert("選択してください");
return false;
}

if(document.form1.bunkai2.value == "未選択")
{
window.alert("選択してください");
return false;
}

if(document.form1.heikai.value == "未選択")
{
window.alert("選択してください");
return false;
}

}
//-->
</SCRIPT>

********　　HTML内のフォーム　　*********
<table>
<tr><th>1 ( * )</th>
<td> <SELECT NAME="kaikai">
<OPTION selected VALUE="未選択">選択してください</OPTION>
<OPTION VALUE="参加">参加</OPTION>
<OPTION VALUE="不参加">不参加</OPTION>
</SELECT></td></tr>
<tr><th>2 ( * )</th>
<td> <SELECT NAME="bunkai1">
<OPTION selected VALUE="未選択">選択してください</OPTION>
<OPTION VALUE="参加">参加</OPTION>
<OPTION VALUE="不参加">不参加</OPTION>
</SELECT></td></tr>

<tr><th>3 ( * )</th>
<td> <SELECT NAME="bunkai2">
<OPTION selected VALUE="未選択">選択してください</OPTION>
<OPTION VALUE="参加">参加</OPTION>
<OPTION VALUE="不参加">不参加</OPTION>
</SELECT></td></tr>

<tr><th>4 ( * )</th>
<td> <SELECT NAME="heikai">
<OPTION selected VALUE="未選択">選択してください</OPTION>
<OPTION VALUE="参加">参加</OPTION>
<OPTION VALUE="不参加">不参加</OPTION>
</SELECT></td></tr>
</table>

回答No.1

yambejp · ベストアンサー

たとえばこんな感じでフラグで管理するとよいでしょう。
スクリプトとスタイルシートは外部化しときました。

//hoge.htm
<link rel="stylesheet" type="text/css" href="hoge.css">
<script type="text/javascript" src="hoge.js"></script>

********　　HTML内のフォーム　　*********
<form onSubmit="return fcheck(this)">
<div>
<div class="midasi">1 ( * )</div>
<div>
<SELECT NAME="kaikai">
<OPTION selected VALUE="未選択">選択してください</OPTION>
<OPTION VALUE="参加">参加</OPTION>
<OPTION VALUE="不参加">不参加</OPTION>
</SELECT>
</div>
</div>
<div>
<div class="midasi">2 ( * )</div>
<div>
<SELECT NAME="bunkai1">
<OPTION selected VALUE="未選択">選択してください</OPTION>
<OPTION VALUE="参加">参加</OPTION>
<OPTION VALUE="不参加">不参加</OPTION>
</SELECT>
</div>
</div>
<div>
<div class="midasi">3 ( * )</div>
<div>
<SELECT NAME="bunkai2">
<OPTION selected VALUE="未選択">選択してください</OPTION>
<OPTION VALUE="参加">参加</OPTION>
<OPTION VALUE="不参加">不参加</OPTION>
</SELECT>
</div>
</div>
<div>
<div class="midasi">4 ( * )</div>
<div>
<SELECT NAME="heikai">
<OPTION selected VALUE="未選択">選択してください</OPTION>
<OPTION VALUE="参加">参加</OPTION>
<OPTION VALUE="不参加">不参加</OPTION>
</SELECT>
</div>
</div>
<input type="submit" value="check">
</form>

//hoge.js
function fcheck(f) {
var list={kaikai:"開会",bunkai1:"分会1",bunkai2:"分会2",heikai:"閉会"};
var flg=false;
for(var i in list){
if(f[i].value=="未選択"){
window.alert(list[i]+"を選択してください");
return false;
}
if(f[i].value=="参加") flg=true;
}
if(!flg) alert("参加する会を最低一つは選択してください。");
return flg;
}

//hoge.css
.midasi{
font-weight:bold;
float:left;
}

お礼

yambejpさん　ご回答ありがとうございます。
＞スクリプトとスタイルシートは外部化
こちらは諸所の事情により現実的ではないんです
折角教えていただいていながらすみませんm(_ _)m

また、上記のスクリプトまとめて頂いたものを直接書いてもうまく動作しません。
他のチェック事項が全てスルーになってしまいます。

質問しておきながらまことに申し訳ございません。
このレスは下げさせていただきます。
まことに申し訳ございません。