nameにハイフンを入れてラジオボタン未選択を判定したい

解決済

質問者：fuuuuumi
質問日時：2006/04/28 17:11
回答数：6件

Javascriptにてひとつ問題が起こりました。

2つのラジオボタンがあり、どちらも選択せずに選択ボタンを押した時、「どちらかを選択して下さい」とメッセージが出るようにしたいです。

Javascriptは、nameにハイフンが入っていると動作しないようですが、nameにハイフンを入れて動作させなくてはならない状況です。
（nameにハイフンを入れなければ動作するのですが・・・）
私が調べたところ、下記のスクリプトでは、["SELECT-1"]や['SELECT-1']に変更しても動作しませんでした。
下記のスクリプトを別の書き方に変更すれば可能なのかもわかりませんが、詳しくないので書けません。

nameにSELECT-1（途中にハイフンがあり、その後に数字が続きます）を使って可能な記述方法がございましたら、教えて下さい。
下記のような記述ではなくても、nameがSELECT-1で動作するのであれば、変更しても構わないです。
ご存知の方、教えて下さい！
どうぞよろしくお願い致します。

<html>
<head>
<script language="javascript">
<!--
function choice(){
if((document.form1.SELECT-1[0].checked==false)&&
(document.form1.SELECT-1[1].checked==false))
alert("どちらかを選択して下さい");
}
</script>
</head>

<body>
<form name="form1">
<input type="radio" name="SELECT-1" value="A">A
<input type="radio" name="SELECT-1" value="B">B
<input type="button" value="選択" onClick="choice()">
</form>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (6件)

ベストアンサー優先
最新から表示
回答順に表示

No.6ベストアンサー

回答者： yambejp
回答日時：2006/04/29 23:34

formはonsubmitでfalseを受けると送信しません。

その動作を理解すれば以下のようなスクリプトに
なります。

<html>
<head>
<script language="javascript">
function choice(f){
for (var i=0;i<f.length;i++){
if(f[i].type=="radio" && f[i].name=="SELECT-1" && f[i].checked==true) return true;
}
alert("どちらかを選択して下さい");
return false;
}
</script>
</head>

<body>
<form method="post" action="abc.cgi" onSubmit="return choice(this)">
<input type="radio" name="SELECT-1" value="A">A
<input type="radio" name="SELECT-1" value="B">B
<input type="submit" value="選択"">
<input type="reset" value="クリア">
</form>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

またまたありがとうございます！
完璧です！希望通りの動作が確認できました。
本当に助かりました。感謝します！

通報する

お礼日時：2006/04/30 13:08

No.5

回答者： noname#22259
回答日時：2006/04/29 18:21

>>No.3（訂正）T_T

×　○　if((obj[0].checked==false&&obj[1].checked==false){
○　if(obj[0].checked==false&&obj[1].checked==false){

- 0
- 件

通報する

この回答へのお礼

ありがとうございます！
訂正すると動作しました。

通報する

お礼日時：2006/04/30 13:06

No.4

回答者： yambejp
回答日時：2006/04/28 23:56

厳密に書くとこんな感じです。

radioは一つ一つが独立したオブジェクトだと
気が付けば、フォームの１要素として評価できます。

<html>
<head>
<script language="javascript">
function choice(f){
for (var i=0;i<f.length;i++){
if(f[i].type=="radio" && f[i].name=="SELECT-1" && f[i].checked==true) return f[i].value;
}
alert("どちらかを選択して下さい");
}
</script>
</head>

<body>
<form>
<input type="radio" name="SELECT-1" value="A">A
<input type="radio" name="SELECT-1" value="B">B
<input type="button" value="選択" onClick="choice(this.form)">
<input type="reset" value="クリア">
</form>
</body>
</html>

この回答への補足

ご回答ありがとうございます！

ところが、もうひとつ問題が生じてしまいました。。。
きちんと書くべきでした。申し訳ないです！

実は、ボタンを押すことでCGIが動き、ラジオボタンの結果ページが表示されます。
ところが、このままですと、「どちらかを選択してください」とエラーメッセージが出てOKボタンを押した後、
そのままCGIの動作に入ってしまい、ラジオボタンの結果が出ないままのページが表示されてしまいます。

<form method="post" action="abc.cgi">
こんな感じで書いてあるのですが・・・

「どちらかを選択してください」とエラーメッセージが出てOKボタンを押した後、
CGIの動作を中断させ、再びラジオボタンの選択ページを表示させる場合の処理の仕方はございますでしょうか？
もし、対策がございましたら、教えていただけないでしょうか？
Javascriptで解決できるような感じがするのですが・・・
よろしくお願い致します。

補足日時：2006/04/29 17:50

通報する

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます！！
実際に使用したいページで動作しました。

通報する

お礼日時：2006/04/29 17:50

No.3

回答者： noname#22259
回答日時：2006/04/28 21:43

>>No.2（訂正）

×　if((obj[0].checked==false)&&(obj[1].checked==false){
○　if((obj[0].checked==false&&obj[1].checked==false){

------
等価演算子は論理演算子より優先順位が高いので、質問のコードの
if((document.form1.SELECT-1[0].checked==false)&&
(document.form1.SELECT-1[1].checked==false))
のように余分な括弧でくくる必要はありません。
間違いの元です。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
No.2のスクリプトで、訂正分を訂正して試しましたが、なぜか動作しませんでした。
余分に（）でくくるとよくないのですね。
本から抜粋したスクリプトにnameなどを変更したのですが、問題があるのかも知れませんね。
私自身がチンプンカンプンなので、どこに問題があるのかさっぱりわかりませんでした。。。

通報する

お礼日時：2006/04/29 17:49

No.2

回答者： noname#22259
回答日時：2006/04/28 17:58

<script type="text/javascript">

function choice(){
obj=document.form1['SELECT-1'];
if((obj[0].checked==false)&&(obj[1].checked==false){
alert("どちらかを選択して下さい");
}
}
</script>
</head>
<body>

<form name="form1">
<input type="radio" name="SELECT-1" value="A">A
<input type="radio" name="SELECT-1" value="B">B
<input type="button" value="選択" onClick="choice()">
</form>

- 0
- 件

通報する

No.1

回答者： LancerVII
回答日時：2006/04/28 17:21

こんにちは。

if((document.form1.SELECT-1[0].checked==false)&&
(document.form1.SELECT-1[1].checked==false))
alert("どちらかを選択して下さい");
}

を

if((document.form1.elements['SELECT-1'][0].checked==false)&&
(document.form1.elements['SELECT-1'][1].checked==false))
alert("どちらかを選択して下さい");
}

に変更することで出来ませんか？

document.form1.elements['SELECT-1'];

でform1のSELECT-1の要素が取れると思います。