締切済み

JavaScriptで項目入力の制限分岐の仕方

2013/01/18 07:21

WEBアンケートフォームを作る際、JavaScriptで項目入力の制限分岐の仕方を教えてください WEBアンケートフォームを作ろうとしているのですが、条件がいくつかありうまく作れません。どなたかこの様な条件分岐でうまくいく方法をご存知の方、あるいは例がのっているWEBチュートリアルのページをご存知の方いらっしゃいませんか？【以下、作りたいフォームの項目】選択肢Ａ～Ｅ（ラジオボタンによる選択）とプルダウンメニュー、テキストボックス入力フィールドがある。 --------------- ＡプルダウンメニューＢＣＤＥテキストボックス --------------- テキストボックスはグレーアウトでデフォルトは入力不可になっている。プルダウンメニューもデフォルトでは選択ができないようになっている。Ａを選んだらプルダウンメニューが選択可。Ｃ、Ｄ、Ｅを選んだら、テキストボックスが入力可能になる。 ■■■ いろいろOK Wave内を調べたり、ググって調べて以下のようなソースを書いてみたのですが、 FireFoxやGoogleCromeだとうまく動きません。これを動かせるようにしていただいても、助かります。 <input type="radio" name="radio1" value="ＡＡＡ" id="r1" checked onclick="this.form.select1.style.display='inline';this.form.select2.style.display='none';this.form.select3.style.display='none';this.form.select4.style.display='none';this.form.select5.style.display='none'"><label for="r1">ＡＡＡ</label><select name="select1" style="display='inline'"><option value="" selected> ------------- </option><option value="１１１">１１１</option><option value="２２２">２２２</option><option value="３３３">３３３</option><option value="４４４">４４４</option><option value="５５５">５５５</option><option value="６６６">６６６</option><option value="７７７">７７７</option><option value="８８８">８８８</option><option value="９９９">９９９</option></select><br /><input type="radio" name="radio1" value="ＢＢＢ" id="r2" onclick="this.form.select2.style.display='inline';this.form.select1.style.display='none';this.form.select3.style.display='none';this.form.select4.style.display='none';this.form.select5.style.display='none'"><label for="r2">ＢＢＢ</label><input name="select2" style="display='none'"><br /><input type="radio" name="radio1" value="ＣＣＣ" id="r3" onclick="this.form.select3.style.display='inline';this.form.select1.style.display='none';this.form.select2.style.display='none';this.form.select4.style.display='none';this.form.select5.style.display='none'"><label for="r3">ＣＣＣ</label><input name="select3" style="display='none'"><br /><input type="radio" name="radio1" value="ＤＤＤ" id="r4" onclick="this.form.select4.style.display='inline';this.form.select1.style.display='none';this.form.select2.style.display='none';this.form.select3.style.display='none';this.form.select5.style.display='none'"><label for="r4">ＤＤＤ</label><input name="select4" style="display='none'"><br /><input type="radio" name="radio1" value="ＥＥＥ" id="r5" onclick="this.form.select5.style.display='inline';this.form.select1.style.display='none';this.form.select2.style.display='none';this.form.select3.style.display='none';this.form.select4.style.display='none'"><label for="r5">ＥＥＥ</label><input name="select5" style="display='none'"> ■■■ よろしくお願いします。