- ベストアンサー
ラジオボタンでの動的項目の変化について
- ラジオボタンをクリックする度に入力フォームが変化する方法についての質問です。
- 現在の実装ではonClickで関数を呼び出して変化させようとしていますが、うまくいきません。
- 環境はJavaScript + PHP、IEです。サンプルコードのURLかコードの記述をお願いします。
- hiroko8888
- お礼率100% (2/2)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
> 現在、onClickで関数を呼び出し変化させようとしていますが、うまくいきません。 この場合はonchange()を使った方が良いですよ。 下に簡単なサンプルコードを貼っておきます。 入力フォームの切り替え部分はJavaScriptライブラリのjQuery(http://jquery.com/)を使っています。jQueryを使用しなくても実現できますが・・・。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="content-script-type" content="text/javascript"> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript"> <!-- function showCheck() { var text = '<input type="checkbox" name="check" value="A"/>A ' + '<input type="checkbox" name="check" value="B"/>B ' + '<input type="checkbox" name="check" value="C"/>C'; $("#container").html(""); $("#container").html(text); } function showRadio() { var text = '<input type="radio" name="radio" value="A"/>A ' + '<input type="radio" name="radio" value="B"/>B ' + '<input type="radio" name="radio" value="C"/>C'; $("#container").html(""); $("#container").html(text); } function showText() { var text = '<input type="text" name="text"/>'; $("#container").html(""); $("#container").html(text); } //--> </script> </head> <body> <form> <input type="radio" name="type" value="check" checked="checked" onchange="showCheck();"/>チェックボックス <input type="radio" name="type" value="radio" onchange="showRadio();"/>ラジオボタン <input type="radio" name="type" value="text" onchange="showText();"/>テキストフィールド <div id="container"> <input type="checkbox" name="check" value="A"/>A <input type="checkbox" name="check" value="B"/>B <input type="checkbox" name="check" value="C"/>C </div> </form> </body> </html>
その他の回答 (1)
- x_jouet_x
- ベストアンサー率68% (162/236)
> お手数ですが、再度ご教示頂けないでしょうか？ JavaScriptでDOMの処理を記述するのが面倒だったので、先のサンプルコードはjQueryというJavaScriptライブラリを使用していました。 説明不足ですみません・・・。 JavaScriptのみで記述すると以下のようになります。 以下で動作しないようであれば再びご指摘願います。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="content-script-type" content="text/javascript"> <script type="text/javascript"> <!-- function showCheck() { // id="container"要素の取得 var container = document.getElementById("container"); // id="container"要素配下の子要素を全て削除 while(container.firstChild) { container.removeChild(container.firstChild); } // チェックボックスAの作成 var checkA = document.createElement("input"); checkA.type = "checkbox"; checkA.name = "check"; checkA.value = "A"; container.appendChild(checkA); var textA = document.createTextNode("A "); container.appendChild(textA); // チェックボックスBの作成 var checkB = document.createElement("input"); checkB.type = "checkbox"; checkB.name = "check"; checkB.value = "B"; container.appendChild(checkB); var textB = document.createTextNode("B "); container.appendChild(textB); // チェックボックスCの作成 var checkC = document.createElement("input"); checkC.type = "checkbox"; checkC.name = "check"; checkC.value = "C"; container.appendChild(checkC); var textC = document.createTextNode("C"); container.appendChild(textC); } function showRadio() { // id="container"要素の取得 var container = document.getElementById("container"); // id="container"要素配下の子要素を全て削除 while(container.firstChild) { container.removeChild(container.firstChild); } // ラジオボタンAの作成 var radioA = document.createElement("input"); radioA.type = "radio"; radioA.name = "radio"; radioA.value = "A"; container.appendChild(radioA); var textA = document.createTextNode("A "); container.appendChild(textA); // ラジオボタンBの作成 var radioB = document.createElement("input"); radioB.type = "radio"; radioB.name = "radio"; radioB.value = "B"; container.appendChild(radioB); var textB = document.createTextNode("B "); container.appendChild(textB); // ラジオボタンCの作成 var radioC = document.createElement("input"); radioC.type = "radio"; radioC.name = "radio"; radioC.value = "C"; container.appendChild(radioC); var textC = document.createTextNode("C"); container.appendChild(textC); } function showText() { // id="container"要素の取得 var container = document.getElementById("container"); // id="container"要素配下の子要素を全て削除 while(container.firstChild) { container.removeChild(container.firstChild); } // テキストフィールドの作成 var text = document.createElement("input"); text.type = "text"; text.name = "text"; container.appendChild(text); } //--> </script> </head> <body> <form> <input type="radio" name="type" value="check" checked="checked" onchange="showCheck();"/>チェックボックス <input type="radio" name="type" value="radio" onchange="showRadio();"/>ラジオボタン <input type="radio" name="type" value="text" onchange="showText();"/>テキストフィールド <div id="container"> <input type="checkbox" name="check" value="A"/>A <input type="checkbox" name="check" value="B"/>B <input type="checkbox" name="check" value="C"/>C </div> </form> </body> </html>
お礼
再度回答していただきありがとうございました！ 実行確認が取れ参考にさせていただきたいと思います。 大変親切に回答していただきありがとうございました。
お礼
x_jouet_xさん 早速、回答していただきありがとうございます。 サンプルコードを実際に動作しようとしたのですがIEだと「オブジェクトを指定してください」とエラーが表示され、実行できませんでした。 お手数ですが、再度ご教示頂けないでしょうか？ なにぶん、学び始めた者ですみません・・・ 以上よろしくお願いします。