dポイントプレゼントキャンペーン実施中！

おしえて

ラジオボタン選択内容に応じて、表示内容を切り替えるようにしたい。

解決済

  • 質問者：hiro721
  • 質問日時：
  • 回答数：4件

ラジオボタン選択内容に応じて、表示内容を切り替えるようにしたいのですが、
いくら調べても全て表示がなく、表示非表示切り替えするものしかなく分からない状態です。
今勉強中でどうつくればいいか、分からない状況でしたので、ご相談させていただきました。
※html、css、javascriptを使用予定です。

例 ） ・すべて ・項目１ ・項目２
ああ ああ いい
いい

ご教授お願いしますm(_ _)m

質問者からの補足コメント

  • まだどのようにプログラム組めばいいかわからず、javascriptも組めてない状態です＞＜
    今現代段階ではこんな感じです、、、。

    ※満たしたい条件
    「すべて」選択した場合、タイトル１の内容とタイトル２の内容表示
    「選択１」を選択した場合、タイトル１の内容のみ表示
    「選択２」を選択した場合、タイトル２の内容のみ表示

    ■css
    /* 見出し枠 */
    .title_frame{
    background :#0000ff;
    border :1px solid #0000ff;
    padding-left :10px;
    font-size:1.16em;
    color:#ffffff;
    font-weight :bold;
    }
    .frame{
    border:1px solid #0000ff;
    padding:10px;font-size: 1em;
    font-size:1em;
    }

    No.1の回答に寄せられた補足コメントです。 補足日時：2015/03/19 15:12
    通報する

  • ■html
    <table><tr valign="top"><td><input type="radio" name="test" value=""> ：すべて<input type="radio" name="test" value="1111111"> ：選択１<input type="radio" name="test" value="2222222"> ：選択２<br><br><div class="title_frame">タイトル１</div><div class="frame">文章説明<br><ol><li>ああああ</li></ol></div><div class="title_frame">タイトル２</div><div class="frame">文章説明<br><ol><li>いいいい</li></ol></div></td></tr></table>

      補足日時：2015/03/19 15:18
    通報する

  • ご回答ありがとうございます。
    俺の実力不足のせいか、「ああ」と「いい」だけ表示されたままで、
    うまく表示内容が切り替わらず、終わりました、、、。
    コードをご丁寧に記載していただいたのにすみません＞＜

    No.2の回答に寄せられた補足コメントです。 補足日時：2015/03/19 17:42
    通報する

  • ２度もご丁寧に説明していただきありがとうございます。
    でも残念なことに、動かずにおわってしまいました。
    おそらく、俺の実力不足によるものだと思います。
    すみません＞＜ ご回答ありがとうございましたm(_ _)m

    No.4の回答に寄せられた補足コメントです。 補足日時：2015/03/20 09:53
    通報する

  • 自分が打ち込んでいる内容に適したもので、とても参考になる回答でした。
    ありがとうございます。
    どちらも素晴らしいご回答で悩みましたが、
    こちらをベストアンサーとさせていただきます。

    お忙しい中、ご回答ありがとうございましたm(_ _)m

    No.3の回答に寄せられた補足コメントです。 補足日時：2015/03/20 10:02
    通報する
通報する

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

質問の本文を隠す

A 回答 (4件)

No.3ベストアンサー

  • 回答者： yambejp
  • 回答日時：

#1です。

ライブラリとか使わないでやるとこんな感じかな

<html>
<head>
<script>
try{
document.addEventListener ('click',function(e){clickfunc(e)},true);
}catch(e){
document.attachEvent('onclick',function(e){clickfunc(e)});
}
function clickfunc(e){
var t = (e.srcElement || e.target);
if(t.nodeName=="INPUT" && t.type=="radio" && t.name=="test"){
switch(t.value){
case "":
display_komoku("k1",true);
display_komoku("k2",true);
break;
case "1111111":
display_komoku("k1",true);
display_komoku("k2",false);
break;
case "2222222":
display_komoku("k1",false);
display_komoku("k2",true);
break;
}
}
}
function display_komoku(val,flg){
var n=document.getElementsByTagName("*");
var r1=new RegExp("(?:^| +)"+val+"(?: +|$)");
var r2=new RegExp("(?:^| +)hide(?: +|$)");
for(var i=0;i<n.length;i++){
if(n[i].className.match(r1)){
if(flg && n[i].className.match(r2)){
n[i].className=n[i].className.replace(r2," ");
}else if(!flg && !n[i].className.match(r2)){
n[i].className+=" hide";
}
}
}
}
</script>
<style>
.hide{display:none;}
</style>
</head>
<body>
<table>
<tr valign="top">
<td>
<input type="radio" name="test" value="" checked> ：すべて
<input type="radio" name="test" value="1111111"> ：選択１
<input type="radio" name="test" value="2222222"> ：選択２<br>
<br>
<div class="title_frame k1">タイトル１</div>
<div class="frame1 k1">文章説明<br>
<ol>
<li>ああああ</li>
</ol>
</div>
<div class="title_frame k2">タイトル２</div>
<div class="frame k2">文章説明<br>
<ol>
<li>いいいい</li>
</ol>
</div>
</td>
</tr>
</table>
</body>
</html>
この回答への補足あり
    • good
    • 1
    • 件
通報する

No.4

  • 回答者： Ogre7077
  • 回答日時：

No.2 は HTML5 環境を想定しているので、もし動かない場合はたぶんコレで



window.onload = function(){ // IE8
function A(a,f){for(var i=0;i<a.length;i++) f(a[i]); }
function Q(s,f){A(document.querySelectorAll(s),f)}
function clicker(form, elem) {
var sec = form.name;
var val = (elem && elem.checked)? elem.value: null;
function switchOpt(e){e.style.display = (val == 'all' || e.className.indexOf(val) >= 0)? 'block': 'none'}
Q('*.opt.' + sec, switchOpt);
}
Q('form.opt input[name=t]', function(elem){elem.onclick = function(){clicker(this.form, this)};});
// Q('form.opt', clicker); // 初期化が必要な場合
};
この回答への補足あり
    • good
    • 1
    • 件
通報する

No.2

  • 回答者： Ogre7077
  • 回答日時：

<script>addEventListener('DOMContentLoaded', function(){


function A(a){return isNaN(a.length)? [a]: Array.prototype.slice.apply(a) }
function Q(s){return A(document.querySelectorAll(s))}
function changer(ev) {
var form = ev.currentTarget;
var val = A(form.elements['t']).reduce(function(p,v){return v.checked? v.value: p},null);
var sec = form.name;
Q('section.opt').filter(function(elem){
return elem.classList.contains(sec);
}).forEach(function(elem){
elem.style.display = (val == 'all')? 'block': elem.classList.contains(val)? 'block': 'none';
});
}
Q('form.opt').forEach(function(elem){elem.addEventListener('change', changer, false)});
}, false)</script>
<form class=opt name=aiueo><!-- 選択肢は form で囲み、適当な name をつける -->
<label><input type=radio name=t value=all>all</label>
<label><input type=radio name=t value=x1>item 1</label>
<label><input type=radio name=t value=x2>item 2</label>
</form>
<section class="opt aiueo x1">ああ</section><!-- form と同じ name を class に加える -->
<section class="opt aiueo x2">いい</section>
この回答への補足あり
    • good
    • 1
    • 件
通報する

No.1

  • 回答者： yambejp
  • 回答日時：

表示する項目はどういう構造でしょう？


「ああ」とか「いい」がどういうタグに収まっている前提でしょうか？
この回答への補足あり
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報