フォームの内容を特定の要素に即反映させようとしているのですが、チェックボックスを選択した時にうまく反映させることができません。
以下のサイトを参考としているのですが、どなたか分かる方はいらっしゃいますでしょうか。http://alphasis.info/2013/12/javascript-gyakubiki-form-immediatelyreflect/
HTMLが<form id="sampleForm">性別： <input type="radio" name="formSex" value="男" checked>男 <input type="radio" name="formSex" value="女">女</form><div id="sampleOutput"> 性別：<span id="sampleOutputSex"></span></div>だとしたら、JSはdocument.getElementById( "sampleOutputSex" ).innerHTML = $formObject.querySelector(’input[name="formSex"]:checked’).value;みたいな？対応してるのはIE9以上みたいですが
性別という項目が1つだけなら動くのですが、複数配置した場合動きません。原因分かるでしょうか。またラジオボタン以外にチェックボックスを配置して複数選択した際に反映させたいのですが、もしお分かりでしたらご教授お願いできますでしょうか。javascriptの全くの初心者で申し訳ありません。いろいろと調べて試してみてるのですがどうもうまくいきません。
＞複数配置IDとnameを使い回してませんか？（まるっとコピペ）それなら動きませんよね？もしそうならJS以前（HTMLの理解）の問題だと思いますが・・・そのレベルだと、jQueryとか使った方がよいような気がします。ご検討ください。
リセットボタンを配置していると:checkedが2つあるとうまく動かないようでした。リセットボタンを消したらうまく動作しました。jQueryも検討してみたいと思います。
「うまくできません」ですべての説明を集約させようとするのが初心者の特徴。「うまく帰れません」といくら泣いたところで、あなたに帰り方を説明できる人はいないでしょう。犬のおまわりさんがすべてを汲み取ってくれればいいのだけれど。
みんなの回答 2 件
HTMLが
<form id="sampleForm">
性別：
<input type="radio" name="formSex" value="男" checked>男
<input type="radio" name="formSex" value="女">女
</form>
<div id="sampleOutput">
性別：<span id="sampleOutputSex"></span>
</div>
だとしたら、JSは
document.getElementById( "sampleOutputSex" ).innerHTML = $formObject.querySelector(’input[name="formSex"]:checked’).value;
みたいな？対応してるのはIE9以上みたいですが
「うまくできません」ですべての説明を集約させようとするのが初心者の特徴。「うまく帰れません」といくら泣いたところで、あなたに帰り方を説明できる人はいないでしょう。犬のおまわりさんがすべてを汲み取ってくれればいいのだけれど。
関連するトピックス