人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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


●質問者: akide
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● a-kuma3
●100ポイント

こんな感じ?

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


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

akideさんのコメント
回答ありがとうございます。 参考ソースにて勉強させて頂きます。

2 ● Cherenkov
●100ポイント

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


Cherenkovさんのコメント
(getElementsByClassNameじゃなくてquerySelector使えばよかったか) jQueryありかなしか明記していただくとうれしいですね。

a-kuma3さんのコメント
ああ、:checked を使うと、きれいになるねえ。 html2.textContent を、配列 text から抜いてくるのを忘れてますよ。

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

a-kuma3さんのコメント
ああ、恥ずかしい >< またやってしまった

akideさんのコメント
回答ありがとうございます。 参考ソースにて勉強させて頂きます。

3 ● rsc
●100ポイント

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

ゼロからわかる JavaScript超入門

ゼロからわかる JavaScript超入門


<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


akideさんのコメント
回答ありがとうございます。 参考ソースにて勉強させて頂きます。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ