フォームで選択がひとつも無かった場合アラートを表示

質問

以下のような内容でひとつもチェックが無かった場合、
送信時に「1項目以上選択してくさい」というアラートを表示させたいのですが、
他のサイトで調べても、希望通りのものがなく困っております。

■選択A
<input type="checkbox" name="A" value="りんご">りんご
<input type="checkbox" name="A" value="みかん">みかん
<input type="checkbox" name="A" value="いちご">いちご
■選択B
<input type="checkbox" name="B" value="テレビ">りんご
<input type="checkbox" name="B" value="冷蔵庫">みかん
<input type="checkbox" name="B" value="洗濯機">いちご
■選択C
<select name="C">
<option value="" selected="selected">選択C</option>
<option value="車">車</option>
<option value="バイク">バイク</option>
<option value="自転車">自転車</option>

checkboxやselectなどinputの種類を問わず、
全ての項目の中から1つ以上の選択が合った場合送信して、
無かった場合はアラート表示させる方法をご存知の方いらっしゃいましたらご教授ください。
どうぞ宜しくお願いいたします。

回答No.1

yambejp · ベストアンサー

ざっくりこんな感じ

<script>
function check(f)
{
var flg=false;
for(var i=0;i<f.length;i++){
if(f[i].type=="checkbox" && f[i].checked){
flg=true;
break;
}
if(f[i].type=="select-one" && f[i].selectedIndex>0){
flg=true;
break;
}
}
if(!flg) alert("えらんでね！")
return flg;
}
</script>
<form onsubmit="return check(this)">
<fieldset>
<legend>■選択A</legend>
<input type="checkbox" name="A" value="りんご">りんご
<input type="checkbox" name="A" value="みかん">みかん
<input type="checkbox" name="A" value="いちご">いちご
</fieldset>
<fieldset>
<legend>■選択B</legend>
<input type="checkbox" name="B" value="テレビ">りんご
<input type="checkbox" name="B" value="冷蔵庫">みかん
<input type="checkbox" name="B" value="洗濯機">いちご
</fieldset>
<fieldset>
<legend>■選択C</legend>
<select name="C">
<option value="" selected="selected">選択C</option>
<option value="車">車</option>
<option value="バイク">バイク</option>
<option value="自転車">自転車</option>
</select>
</fieldset>
<div>
<input type="submit" value="go">
</div>
</form>

お礼

早速ありがとうございます。
うまく行きそうです。
こちらで試してします。
本当に助かりました。