ラジオボタンでチェックした項目を必須にし、javascriptでアラートを出したい

質問

こんにちは・・・。
前回はphpで同じ質問をしたのですが、今回はjavascriptを使わなくてはなりません・・・ＯＴＬ
重複質問のようで申し訳ないのですが、
連絡先方法【必須】をラジオボタンで選択した際、選択した項目（テキストエリア）を必須にしたいのです。
連絡先方法を必須にするやり方はわかりますが、それ以降がわかりません。。

どなたかご教授願います！！

<input type="radio" name="renraku" value="TEL">ＴＥＬ　　
<input type="radio" name="renraku" value="FAX">ＦＡＸ　　
<input type="radio" name="renraku" value="E-Mail">Ｅ－Ｍａｉｌ

function CheckInput(){
/*----- check -----*/
flag = 0;
for ( i = 0 ; i < document.form_1.renraku.length ; i++){
if (document.form_1.renraku[i].checked){ flag = 1; }
}

if (!flag){
alert('御希望連絡方法を選択して下さい');
return false;
}
}

この続きを教えて下さい・・・お願い致します！

回答No.3

15mm · ベストアンサー

記述のほう、<select>と間違えてました＾＾；
#２の方の回答でいいと思いますが、
チェックボックスは選択されているがテキストエリアに入力はされていない
というときのメッセージを変えられるようにしてみました。

<form name="form_1" onsubmit="return CheckInput(this);"><!--要素は好きに配置-->
<input type="radio" name="renraku" value="TEL">ＴＥＬ　　
<input type="radio" name="renraku" value="FAX">ＦＡＸ　　
<input type="radio" name="renraku" value="E-Mail">Ｅ－Ｍａｉｌ
<textarea id="tTEL"></textarea>
<textarea id="tFAX"></textarea>
<textarea id="tE-Mail"></textarea></form>

function CheckInput(f){
var v,flag = 0;
for ( i = 0 ; i < f.renraku.length ; i++){
if (f.renraku[i].checked){flag = 1;
v=document.getElementById("t"+f.renraku[i].value).value;}
}
if (!flag){
alert('御希望連絡方法を選択して下さい');
return false;
}
if(!v){
alert('御希望連絡先を入力して下さい');return false;
}
return true;
}

お礼

この方法で出来ました！！
本当に、本当に、ありがとうございました～！！
もう少し、基礎から学ぼうと思います・・・。
ご丁寧にありがとうございました！

回答No.2

yambejp

微妙にちがうかもしれませんが、こんなんでどうでしょう？

<script>
function CheckInput(f){
var flag = true;
for(var i=0;i<f.length;i++){
if (f[i].type=="radio" && f[i].name=="renraku" && f[i].checked){
flag = false;
var v=f[i].value;
}
}
if(v!="")
for(var i=0;i<f.length;i++){
if(f[i].type=="textarea" && f[i].name=="t"+v){
if(f[i].value=="") flag=true;
}
}
if(flag){
alert('御希望連絡方法を選択して下さい');
return false;
}

}
</script>
<form>
<input type="radio" name="renraku" value="TEL" id="renraku0"><label for="renraku0">ＴＥＬ</label>
<input type="radio" name="renraku" value="FAX" id="renraku1"><label for="renraku1">ＦＡＸ</label>
<input type="radio" name="renraku" value="E-Mail" id="renraku2"><label for="renraku2">Ｅ－Ｍａｉｌ</label><br>
TEL:<br>
<textarea name="tTEL"></textarea><br>
FAX:<br>
<textarea name="tFAX"></textarea><br>
E-Mail:<br>
<textarea name="tE-Mail"></textarea>
<input type="submit" value="go!" onClick="return CheckInput(this.form)">
</form>

お礼

ありがとうございます♪
label要素、初めて知りました・・・。
使わせていただきます！！

今回はNO.2さんを参考にさせていただきましたが、こちらの方法も試して見ます♪

ご丁寧にありがとうございました！

回答No.1

15mm

<textarea id="tTEL"></textarea>
<textarea id="tFAX"></textarea>
<textarea id="tE-Mail"></textarea>
のようにテキストエリアを追加して、スクリプト部を以下のように追加。

//前略
if (!flag){
alert('御希望連絡方法を選択して下さい');
return false;
}
//ここから追加（returnがあるのでelseは省略してみました）
if(!document.getElementById("t"+document.form_1.renraku.value).value){
//必須のテキストエリアが空欄の場合の処理
}
//ここまで追加

ラジオボタンのvalueの値によって、空欄チェックをするオブジェクトを選んでいます。

お礼

ありがとうございます！！
が・・・動きませんでした・・・。
テキストエリアが空欄の時にアラートを鳴らす事はできないのでしょうか？
重ね重ね申し訳ありません・・・。