ラジオボタンで条件分岐、textを表示したい。

Question

前提・実現したいこと

ボタン“A”が押されて、かつ、ボタン”あ”が押された時、“text1”を表示する。と言うような、ラジオボタンの情報を分岐の条件に設定しようとしています。実装時は、5種類の質問に対して、それぞれ2～3の回答ボタンで分岐が必要となります。以下単純なtestケースで躓いています。是非アドバイをお願い致します。

発生している問題・エラーメッセージ

elseの場合のtext2しか表示されない状態です。宜しくお願いします。

<tr id=box1> <th>アルファベット</th> <td> <label><input type=“radio” name=“alp” value=“hoge1” onClick=“alp();”/>A</label> <label><input type=“radio” name=“alp” value=“hoge2” onClick=“alp();”/>B</label> </td> </tr> <tr id=box2> <th>数字</th> <td> <label><input type=“radio” name=“no” value=“hoge3” onClick=“no();”/>1</label> <label><input type=“radio” name=“no” value=“hoge4" onClick=“no();”/>2</label> </td> </tr> </table> <div id=“text1”><p>あああああ</p></div> <div id=“text2”><p>いいいいい</p></div> <script type="text/javascript"> document.getElementById('text1').style.display ='none'; document.getElementById('text2').style.display ='none'; function alp(){ radio=document.getElementsByName('alp') var n = document.getElementsByName('no'); if(radio[0].checked && n[0].cheked){ document.getElementById('text1').style.display ='block'; document.getElementById('text2').style.display ='none'; }else{ document.getElementById('text1').style.display ='none'; document.getElementById('text2').style.display ='block'; }} </script>

Comments

[退会済みユーザー]

ソースは```で囲んでください

[退会済みユーザー]

elseでtext2しか表示されないとのことですが、ソースにはそう書かれているようにしか見えませんが、想定はなんですか？

Answer 1

<table>
<tr id=box1>
<th>アルファベット</th>
<td>
<label><input type="radio" name="alp" value="hoge1" onClick="alp();"/>A</label>
<label><input type="radio" name="alp" value="hoge2" onClick="alp();"/>B</label>
</td>
</tr>

<tr id=box2>
<th>数字</th>
<td>
<label><input type="radio" name="no" value="hoge3" onClick="alp();"/>1</label>
<label><input type="radio" name="no" value="hoge4" onClick="alp();"/>2</label>
</td>
</tr>
</table>

<div id="text1"><p>あああああ</p></div>
<div id="text2"><p>いいいいい</p></div>

<script>
document.getElementById('text1').style.display ='none';
document.getElementById('text2').style.display ='none';

function alp(){
    var radio=document.getElementsByName('alp')
    var n = document.getElementsByName('no');

    console.log("radio checked? -> ", radio[0].checked);
    console.log("n checked? -> ", n[0].checked);

    if(radio[0].checked && n[0].checked){ // chekedになっていたので修正
        document.getElementById('text1').style.display ='block';
        document.getElementById('text2').style.display ='none';
    }else{
        document.getElementById('text1').style.display ='none';
        document.getElementById('text2').style.display ='block';
    }    
}
</script>

一応上記のソースで想定した動きはこなしてると思います。
動的にHTMLのDOMが増える状況ならこういうやり方では足りないでしょうけど…

Comments

[dona2]

ご回答有難うございます。そのまま試させていただいたところ、Aボタンと1ボタン押下でtext1表示されました！初めて成功したので感動しました。ありがとうございます。
追加で質問よろしいでしょうか…
実装時には『onclick=』にそれぞれ違う名前をつけて使いたいのですが、その際、function 以降はどのように記載すれば実行できますでしょうか？　function alp(){
var radio=document.getElementsByName('alp')
var n = document.getElementsByName('no');
↑上記
宜しくお願いします。

[yeondev]

すみません。
「実装時には『onclick=』にそれぞれ違う名前をつけて使いたいのですが、」
ここら辺よく理解できませんでした…もうちょっと詳しい説明お願いしていいでしょうか？＾＾；

[dona2]

直ぐにお返事頂いたのに、時間が経ってしまい申し訳ありませんでした。『
onclick 』時の指定にそれぞれ違う名前を付けたい。と、記載したのは…
ラジオボタンの分岐で表示させるのは、textだけでなく、更に対象のラジオボタンBoxを複数表示します。
その後、表示されたラジオボタンの値と、分岐前に選択されたラジオボタンの値で分岐させ、それぞれ対象textを表示させたいのですが…
最初の分岐で使用したラジオボタンの『onclick = ‘alp()’』と再度分岐させる際に使用するラジオボタン『onclick = ‘alp()’』と同じにしたところ、両方の分岐がされず、反応無しになってしまいます。
『onclick = ‘alp()’』と『onclick = ‘no()’』と別名称なら動くのかな？と…
ただその際、上記の記載した部分『function alp(){
bar radio=〜』以降の書き方がわかりません。『alp』『no』両方の値を同じ命令文の中で取得するには、どのように記述したらいいのか？ご教授願います。宜しくお願いします。

[yeondev]

えっと…やっぱり理解できませんでした。泣
「『onclick = ‘alp()’』と再度分岐させる際に使用するラジオボタン『onclick = ‘alp()’』と同じにしたところ、両方の分岐がされず、反応無しになってしまいます。」
とおっしゃいましたけど、両方の分岐は上記の画像の通りちゃんと確認できると思います。
あと、「反応無しになってしまいます。」ですが、ちゃんと値の確認はしてみたでしょうか？
dona2さんが自分で操作してみた時にどういう結果が出てるか補足して頂いたら、答えやすいかもしれません。＾＾；

Answer 2

ボタンを2個押した時に、、ということですが、一つ目のボタンを押した時の値は、二つ目のボタンを押した時に引き継がれません。

• デバッグ方法

// if文の前に入れる。デバッガでログを確認する
console.log("値チェック", radio[0].checked ,n[0].cheked)

Comments

[dona2]

ご回答有難うございます。複数ボタン押下の場合、それぞれのボタン情報引き継がれないのですね。そういうことでしたか…勉強になります。varに代入するという方法に目からうろこです。光が見えた気がします。有難うございます！ただ、console.logの使い方もよくわかっていません、申し訳ないです。もう一度試してみます。