akide回答ポイント 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

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

ログインして回答する

みんなの回答

a-kuma32011/11/16 23:30:08
満足100pt

こんな感じ？

<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 属性に = が付いてないのを修正してます。

スター

2件のコメントを見る
a-kuma3 2011/11/17 17:19:06

No.2 のCherenkov さんとのやりとりで、提示された仕様を思いっきり勘違いしていることに気が付きました。
No.2 で、既に答えは出ているとは思いますが、提示された仕様通りに動作するように、回答のコードと jsFiddle のコードを書き変えました。

スター
akide 2011/11/26 16:20:50

回答ありがとうございます。
参考ソースにて勉強させて頂きます。

スター

Cherenkov2011/11/17 06:29:01
満足100pt

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を変更してあります。

スター

5件のコメントを見る
Cherenkov 2011/11/17 06:53:16

（getElementsByClassNameじゃなくてquerySelector使えばよかったか）
jQueryありかなしか明記していただくとうれしいですね。

スター
a-kuma3 2011/11/17 14:08:57

ああ、:checked を使うと、きれいになるねえ。

html2.textContent を、配列 text から抜いてくるのを忘れてますよ。

スター
Cherenkov 2011/11/17 14:35:49

>html2.textContent を、配列 text から抜いてくるのを忘れてますよ。
初期の回答した時はa-kuma3さんの動作を参考にしてa-kuma3さんのjsFiddleと同じ様に表示していたのですが、
仕様を確認するとこの動作で正しいと思います。
>・div.html1に予め指定した文言を表示
>・div.html2にvalueの値を出力

 スター
a-kuma3 2011/11/17 14:58:30

ああ、恥ずかしい　＞＜
またやってしまった

 スター
akide 2011/11/26 16:21:46

回答ありがとうございます。
参考ソースにて勉強させて頂きます。

スター

rsc2011/11/17 14:08:13
満足100pt

　こちらはいかがでしょうか。いろんなやり方があると思いますが、こちらの本を参考にしました。ちょっとレベル低すぎて恥ずかしいですが。(^_^;
●ゼロからわかる 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

スター

1件のコメントを見る
akide 2011/11/26 16:20:11

回答ありがとうございます。
参考ソースにて勉強させて頂きます。

スター

その他の回答を読む

この質問へのコメント

コメントはありません

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

質問の情報

登録日時: 2011-11-16 22:36:27
終了日時: 2011-11-23 22:40:03
回答条件: 1人3回まで

この質問のカテゴリ

ウェブ制作

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

みんなの回答

a-kuma32011/11/16 23:30:08
満足100pt

a-kuma3 2011/11/17 17:19:06

akide 2011/11/26 16:20:50

Cherenkov2011/11/17 06:29:01
満足100pt

Cherenkov 2011/11/17 06:53:16

a-kuma3 2011/11/17 14:08:57

Cherenkov 2011/11/17 14:35:49

a-kuma3 2011/11/17 14:58:30

akide 2011/11/26 16:21:46

rsc2011/11/17 14:08:13
満足100pt

akide 2011/11/26 16:20:11

この質問へのコメント

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

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

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

みんなの回答

a-kuma32011/11/16 23:30:08 満足100pt

a-kuma3 2011/11/17 17:19:06

akide 2011/11/26 16:20:50

Cherenkov2011/11/17 06:29:01 満足100pt

Cherenkov 2011/11/17 06:53:16

a-kuma3 2011/11/17 14:08:57

Cherenkov 2011/11/17 14:35:49

a-kuma3 2011/11/17 14:58:30

akide 2011/11/26 16:21:46

rsc2011/11/17 14:08:13 満足100pt

akide 2011/11/26 16:20:11

この質問へのコメント

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

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

a-kuma32011/11/16 23:30:08
満足100pt

Cherenkov2011/11/17 06:29:01
満足100pt

rsc2011/11/17 14:08:13
満足100pt