チェック判定のスクリプトについて教えてください

質問

各リンクにチェックボックスが1つ付いています。
チェックを入れないとアラートが出るようにしているのですが、
複数チェックボックスがあるとどのように追加していいか分からず困っています。

例えばyahooのチェックボックスの前にチェックがついていれば、
他のチェックがついていなくてもアラートが出ず先に進めるようにしたいです。

現在手探りでここまで書いてみたのですが、後がどのようにしていいか分からなくなってしまいました。

<script type="text/javascript">
<!--
function Check() {
if (!document.xxx.select01.checked){
alert("未チェックの項目があります。")
return false;
}
}
// -->
</script>
<form name="xxx">
<input type="checkbox" name="select01"><a onclick="return Check()" href="http://www.yahoo.co.jp/">yahoo</a><br>
<br />
<input type="checkbox" name="select02"><a onclick="return Check()" href="http://www.google.com/">google</a><br />
<br />
<input type="checkbox" name="select03"><a onclick="return Check()" href="http://www.goo.ne.jp/">goo</a>
</form>

どなたかご教授頂ければ幸いです。
何卒よろしくお願い申し上げます。

回答No.2

yambejp · ベストアンサー

アンカーの一つ前のチェックボタンをチェックするだけならこう？

<script>
function Check(obj) {
var p=obj;
var flg=false;
while(p=p.previousSibling){
if(p.nodeName=="INPUT" && p.type=="checkbox"){
flg=p.checked;
break;
}
}
if(!flg) alert("未チェックの項目があります。");
return flg;
}
</script>
<form>
<div><input type="checkbox" name="select01"><a onclick="return Check(this);" href="http://www.yahoo.co.jp/">yahoo</a></div>
<div><input type="checkbox" name="select02"><a onclick="return Check(this);" href="http://www.google.com/">google</a></div>
<div><input type="checkbox" name="select03"><a onclick="return Check(this);" href="http://www.goo.ne.jp/">goo</a></div>
</form>

お礼

ご回答および動くコードまでありがとうございます！
大変助かりました。
（JavaScript初心者の私にとっては）このような動きでも複雑なコードになるのですね。
勉強させていただきます。

回答No.1

LancerVII

こんにちは。

こんな感じでしょうか。

==== JavaScript
function check ( name ) {
// チェック対象の名前をnameに受け取る
// 受け取ったnameを元に要素を取得
var select = document.getElementsByName(name)[0];
// 取得した要素のチェック状態を返す
// チェックされていればtrueが返るの
return select.checked;
}
==== HTML
<form>
<input type="checkbox" name="select01" value="y" /><a href="http://www.yahoo.co.jp" onclick="return check('select01');">Yahoo</a>
<input type="checkbox" name="select02" value="g" /><a href="http://www.google.co.jp" onclick="return check('select02');">Google</a>
<input type="checkbox" name="select03" value="e" /><a href="http://www.excite.co.jp" onclick="return check('select03');">Excite</a>
</form>

お礼

ご回答ありがとうございます。
コメントもつけていただき参考になります。
勉強させていただきます！