プルダウンメニューに対応させてラジオボタン、チェックボックスを自動選択

以下のプログラムでプルダウンメニューに対応させてラジオボタン、チェックボックスを自動選択できるようにしたいのですがうまく動きません。

<script>
    function a(){
        if(document.getElementById("s_test").value == "2"){
            document.getElementById("s_man").value = "男性";
            document.getElementById("s_utel").value = "希望する";
        }else if(document.getElementById("s_test").value == "3"){
            document.getElementById("s_man").value = "女性";
            document.getElementById("s_utel").value = "希望する";
            document.getElementById("s_utel").value = "希望しない";
        }
    }
</script> 
<body>
  <p><select id="s_test" name="s_select" onChange="a()">
    <option selected value="1">リセット</option>
    <option value="2">ユーザA</option>
    <option value="3">ユーザB</option>
    <option value="4">ユーザC</option>
    </select>
  <fieldset><legend>性別</legend>
    <p>
    <input type="radio" id="s_man" name="s_man" value="男性">
    <label for="s_man">男性</label>
    <input type="radio" id="_man" name="s_man" value="女性">
    <label for="s_man">女性</label>
   </p>
  </fieldset>
  <p>
    <label>お知らせの配信を希望する<input type="checkbox" id="s_utel" name="s_utel" value="希望する "></label>
    <label>お知らせの配信を希望しない<input type="checkbox" id="s_utel" name="s_utel" value="希望しない "></label>
    <label>どちらでも良い<input type="checkbox" id="s_utel" name="s_utel" value="どちらでも "></label></p>
  <p><input type="submit" value="送信" ></p>
 </body>

＜補足＞
一応、記述したプログラムではユーザAを選択すると
ラジオボタンは「男性」を選択
チェックボックスは「希望する」をチェックする
ユーザＢを選択すると
ラジオボタンは「女性」を選択
チェックボックスは「希望する」と「希望しない」にチェックするようにしています。

ご指摘、ご回答のほうよろしくお願いします。

masaya_ohashi

2016/06/10 02:06

自動選択というのは「ユーザ」を選ぶと、「性別」「お知らせのチェックボックス」が選んだ「ユーザ」のデータに合わせて選ばれる、という意味ですか？

Alpha

2016/06/10 02:14

はい。説明不足で申し訳ありません。

行動規範の内容に同意します

回答1件

ベストアンサー

まずそもそもHTML的に問題がある箇所が幾つかあります。

idは同じHTML内に1個であるべき

document.getElementById("xxx")で得られるエレメントは1つです。つまり、idで指定すると、1個しか該当するものがあってはいけません。
チェックボックス3つのidがすべてs_utelになっているのはだめです。s_utel_on,s_utel_off,s_utel_any等、3つとも区別がつくように名称を変えましょう。
nameがかぶっているのは問題ありませんが、idはひとつにしましょう。

女性のlabelの指定がs_manを指している

本来女性のradioのidはs_woman等にすべきで、labelもfor="s_woman"にすべきです。

ラジオボタンですが、ラジオボタンを選択済みにするのは
「checkedというプロパティをtrueにする」、という処理になります。
http://www.w3schools.com/jsref/prop_radio_checked.asp

チェックボックスも同じく「checkedというプロパティをtrueにする」、という処理になります。
http://www.w3schools.com/jsref/prop_checkbox_checked.asp

上記の情報をもとに、getElementByIdで取得したエレメントのcheckedをtrueにする処理を書いてみましょう。

投稿2016/06/10 02:28

masaya_ohashi

総合スコア9206

Alpha

2016/06/10 02:41

ラジオボタンを選択済みにするのに必要なfunction checkなどは function a()の中なのかそれともifのなかでそれぞれ置いてくのかどちらなのでしょうか？

masaya_ohashi

2016/06/10 03:13 編集

参考先の記事は、「checkboxにチェックマークをつけるなら、例えばこんな関数(check)を用意して、中でこう処理すればいいよ。外すならこんな関数(uncheck)になるよ」、という例を挙げているだけです(Exampleと書いてあります)。大事なのは「document.getElementById("red").checked = true;」の1行のコードだけです。べつにfunction checkという関数そのものは重要ではありません。ご自分のコードに、必要な部分だけを取り込んでみてください。

Alpha

2016/06/10 04:02

必要な部分を取り込んで変数を変えてみたらできました。ありがとうございます。質問が少し変わってしますのですが、プルダウンメニューを選択したら既存のラジオボタン、チェックボックスの選択を消す処理はどうしたらいいのでしょうか。試しにfalseでおいてもだめでした。

masaya_ohashi

2016/06/10 04:27

それはおそらくfalseにする「処理」のほうに問題があります。「プルダウンメニューを選択したら」とはどうやって処理を呼び出していますか？

Alpha

2016/06/10 04:36

``` else if(document.getElementById("s_test").value == "1"){ document.getElementById("s_utel_y").value = false; document.getElementById("s_utel_n").value = false; document.getElementById("s_utel_s").value = false; } <p><select id="s_test" name="s_select" onChange="a()"> <option selected value="1">リセット</option> ``` です

masaya_ohashi

2016/06/10 04:41 編集

falseにするのはvalueではなくcheckedです。

Alpha

2016/06/10 04:55

見落としていました。すいません。同様にラジオボックスも修正しましたらできました。ありがとうございます。

行動規範の内容に同意します