重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【終了しました】教えて!goo新規会員登録

ラジオボタンでの動的項目の変化について

解決済

  • 質問者：hiroko8888
  • 質問日時：
  • 回答数：2件

はじめまして、ラジオボタンでの動的項目の変化についてわからないことがあり質問させていただきました。

質問は以下の通りです。
・ラジオボタンをクリックする度に指定した入力フォームに変化する。
（ラジオボタンが三種類あったとしたら、一つ目がチェックボタンでの回答形式。二つ目がラジオボタンでの回答形式。三つ目がテキストボックスでの回答形式といった感じです。）
・現在、onClickで関数を呼び出し変化させようとしていますが、うまくいきません。
・環境はJavaScript + PHP 、IEです。

どなたか、サンプルコードのURLかコードを記述して頂けませんでしょうか？
質問内容がわかりにくいと思いますがよろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.1ベストアンサー

  • 回答者： x_jouet_x
  • 回答日時：

> 現在、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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

x_jouet_xさん

早速、回答していただきありがとうございます。
サンプルコードを実際に動作しようとしたのですがIEだと「オブジェクトを指定してください」とエラーが表示され、実行できませんでした。
お手数ですが、再度ご教示頂けないでしょうか？
なにぶん、学び始めた者ですみません・・・
以上よろしくお願いします。

通報する
お礼日時：2009/08/24 16:23

No.2

  • 回答者： x_jouet_x
  • 回答日時：

> お手数ですが、再度ご教示頂けないでしょうか？



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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

再度回答していただきありがとうございました！

実行確認が取れ参考にさせていただきたいと思います。

大変親切に回答していただきありがとうございました。

通報する
お礼日時：2009/08/25 09:29

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報