javascriptの事で教えてください。

Question

akide

33

32もっと見る

300pt

ウェブ制作

javascriptの事で教えてください。

<p><label class="label01"><input type="radio" name="radio1" id="radio" value="radio1" />1</label>
<label class="label02"><input type="radio" name="radio1" id="radio2" value="radio2" />2</label></p>

<p><label class="label03"><input type="radio" name="radio2" id="radio3" value="radio3" />3</label>
<label class="label04"><input type="radio" name="radio2" id="radio3" value="radio4" />4</label></p>

<div class"html1">

</div>

<div class"html2">

</div>

このようなラジオボタンが有り、チェックが入った際に、
・div.html1に予め指定した文言を表示
・div.html2にvalueの値を出力
・クリックされたラベルにCSSで背景色を付ける

javascriptでどのように記述すればよいでしょうか。

radio1の時は　あいうえお　を表示
radio2の時は　かきくけこ
radio3の時は　さしすせそ
radio4の時は　たちつてと
radio1とradio3の時は　いろは
radio1とradio4の時は　にほへと
radio2とradio3の時は　あかさたな
radio2とradio4の時は　はひふへほ

ラベルにつけたい色は　#ddd

回答の条件

1人3回まで

登録：2011/11/16 22:36:27
終了：2011/11/23 22:40:03

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

コメントはまだありません

rscの日記 - 質問のJavaScriptをちょっと書き直してみた。 2011-11-17 18:38:22

質問のJavaScriptをちょっと書き直してみた。　質問のJavaScriptをちょっと書き直してみました。 ※参考URL http://q.hatena.ne.jp/1321450592 <html> <head> <script type="text/javascript"> functio
それ、うまいのか？ - jQuery で、P 要素を取得する 2011-11-18 15:13:40

jQuery で、P 要素を取得する javascriptの事で教えてください。 1 2 3 4 このようなラジオボタンが有り、チェックが入った際に、・div.html1に予め指定した文言を表示・div.html2にvalueの値を出力

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

a-kuma3 · Answer 1 · 2011-11-16T23:30:08+09:00

こんな感じ？

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
var html1_text = {
        "false|false|false|false|" : "",
        "true|false|false|false|" : "あいうえお",
        "false|true|false|false|" : "かきくけこ",
        "false|false|true|false|" : "さしすせそ",
        "false|false|false|true|" : "たちつてと",
        "true|false|true|false|" : "いろは",
        "true|false|false|true|" : "にほへと",
        "false|true|true|false|" : "あかさたな",
        "false|true|false|true|" : "はひふへほ",
        "" :  ""
    };
$(function() {
    $("input[type=radio]").change(function() {
        // html1
        $(".html1").html(html1_text[ this.id ]);
        var radio_status = "";
        $("input[type=radio]").each(function() {
            radio_status = radio_status + this.checked + "|";
        });
        $(".html1").html(html1_text[ radio_status ]);

        // html2
        $(".html2").html($(this).val());

        // label color
        $("input[type=radio]").each(function() {
            $(this).parent().get(0).style.color = "";
        });
        $(this).parent().get(0).style.color = "#ddd";
    });

});
</script>


<p><label class="label01"><input type="radio" name="radio1" id="radio" value="radio1" />1</label>
<label class="label02"><input type="radio" name="radio1" id="radio2" value="radio2" />2</label></p>

<p><label class="label03"><input type="radio" name="radio2" id="radio3" value="radio3" />3</label>
<label class="label04"><input type="radio" name="radio2" id="radio4" value="radio4" />4</label></p>

<div class="html1">
</div>
<div class="html2">
</div>

jQuery を使ってます。
jsFiddle で試してみたのが、これ。
http://jsfiddle.net/tnXNJ/1/

質問文にあるコードで、radio4 の id が radio3 になってたのと、div の class 属性に = が付いてないのを修正してます。

Cherenkov · Answer 2 · 2011-11-17T06:29:01+09:00

firefox8,chrome15,IE9で動作確認。
http://jsfiddle.net/cherenkov/SWvf4/5/
jQuery版 http://jsfiddle.net/cherenkov/mQXuT/3/

<html>
<head>
<meta charset="UTF-8">
<script>
onload = function() { 
    init();
};

function init() {
    var radios = document.querySelectorAll('input[type="radio"]');
    for (var i=0, n=radios.length; i<n; i++) {
        var e = radios[i];
        e.checked = false;
        bindChangeEvent(e);
    }
}

var text = {
    'radio1':'あいうえお', 'radio2':'かきくけこ', 'radio3':'さしすせそ', 'radio4':'たちつてと',
    'radio1radio3': 'いろは', 'radio1radio4': 'にほへと', 'radio2radio3': 'あかさたな', 'radio2radio4': 'はひふへほ'
};

function bindChangeEvent(e) {
	var html1 = document.querySelector('.html1');
	var html2 = document.querySelector('.html2');
	e.addEventListener('change', function() {
		var radios = document.querySelectorAll('input[type="radio"]:checked');
		if (radios.length === 1) {
			html1.textContent = text[radios[0].id];
			html2.textContent = radios[0].value;
		} else {
			html1.textContent = text[radios[0].id+radios[1].id];
			html2.textContent = radios[0].value + ',' + radios[1].value;;
		}
	}, false);
}
</script>
<style>
:checked+label {background-color: #ddd;}
</style>
</head>
<body>
<p>
<input type="radio" name="radio1" id="radio1" value="radio1" />
<label for="radio1">1</label>
<input type="radio" name="radio1" id="radio2" value="radio2" />
<label for="radio2">2</label>
</p>
<p>
<input type="radio" name="radio2" id="radio3" value="radio3" />
<label for="radio3">3</label>
<input type="radio" name="radio2" id="radio4" value="radio4" />
<label for="radio4">4</label>
</p>
<div class="html1"></div>
<div class="html2"></div>
</body>
</html>

lebelを変更してあります。

rsc · Answer 3 · 2011-11-17T14:08:13+09:00

　こちらはいかがでしょうか。いろんなやり方があると思いますが、こちらの本を参考にしました。ちょっとレベル低すぎて恥ずかしいですが。(^_^;
●ゼロからわかる JavaScript超入門 [大型本] 河西朝雄 (著)

ゼロからわかる JavaScript超入門

作者: 河西朝雄
出版社/メーカー: 技術評論社
発売日: 2010/01/08
メディア: 大型本
購入: 1人クリック: 10回
この商品を含むブログ (7件) を見る

<html>
<head>
<script type="text/javascript">
function check()
{
	var flag;
	var objR1=document.getElementById("radio1");
	var objR2=document.getElementById("radio2");
	var objR3=document.getElementById("radio3");
	var objR4=document.getElementById("radio4");
	var objL1=document.getElementById("L1");
	var objL2=document.getElementById("L2");
	var objL3=document.getElementById("L3");
	var objL4=document.getElementById("L4");
	var objH1=document.getElementById("H1");
	var objH2=document.getElementById("H2");

	objL1.style.color="#000";
	objL2.style.color="#000";
	objL3.style.color="#000";
	objL4.style.color="#000";
	flag=0;
	if(objR1.checked) flag+=1;
	if(objR2.checked) flag+=2;
	if(objR3.checked) flag+=4;
	if(objR4.checked) flag+=8;
	switch(flag){
	case 1:
		objH1.innerHTML="あいうえお";
		objH2.innerHTML=objR1.value;
		objL1.style.color="#ddd";
		break;
	case 2:
		objH1.innerHTML="かきくけこ";
		objH2.innerHTML=objR2.value;
		objL2.style.color="#ddd";
		break;
	case 4:
		objH1.innerHTML="さしすせそ";
		objH2.innerHTML=objR3.value;
		objL3.style.color="#ddd";
		break;
	case 8:
		objH1.innerHTML="たちつてと";
		objH2.innerHTML=objR4.value;
		objL4.style.color="#ddd";
		break;
	case 5:
		objH1.innerHTML="いろは";
		objH2.innerHTML=objR1.value+'+'+objR3.value;
		objL1.style.color="#ddd";
		objL3.style.color="#ddd";
		break;
	case 9:
		objH1.innerHTML="にほへと";
		objH2.innerHTML=objR1.value+'+'+objR4.value;
		objL1.style.color="#ddd";
		objL4.style.color="#ddd";
		break;
	case 6:
		objH1.innerHTML="あかさたな";
		objH2.innerHTML=objR2.value+'+'+objR3.value;
		objL2.style.color="#ddd";
		objL3.style.color="#ddd";
		break;
	case 10:
		objH1.innerHTML="はひふへほ";
		objH2.innerHTML=objR2.value+'+'+objR4.value;
		objL2.style.color="#ddd";
		objL4.style.color="#ddd";
		break;
	}
}
</script>
</head>

<body>
<p onclick="check()">
<label class="label01" id="L1"><input type="radio" name="radio1" id="radio1" value="radio1" />1</label>
<label class="label02" id="L2"><input type="radio" name="radio1" id="radio2" value="radio2" />2</label>
</p>
<p onclick="check()">
<label class="label03" id="L3"><input type="radio" name="radio2" id="radio3" value="radio3" />3</label>
<label class="label04" id="L4"><input type="radio" name="radio2" id="radio4" value="radio4" />4</label>
</p>

<div class="html1" id="H1"></div>
<div class="html2" id="H2"></div>
</body>
</html>

　配列でまとめられそうだったので、ちょっと書き直してみました。参考までにどうぞ。(^_^;
※参考URL
http://d.hatena.ne.jp/rsc96074/20111117/1321522432

javascriptの事で教えてください。

回答（3件）

a-kuma3497421542011/11/16 23:30:08

Cherenkov15044932011/11/17 06:29:01

rsc45044372011/11/17 14:08:13

コメント（0件)

この質問への反応（ブックマークコメント）

トラックバック