ラジオボタンの選択によってアンカーリンクの飛び先を変える

選択したラジオボタンの項目によって、アンカーリンクの飛び先を変更させるには、
jQueryでどのような記述をすればよろしいでしょうか？

<h4>好きな色１つ目</h4>
  <input class="Check1" name="Check1" type="radio" id="RCheck" value="赤">赤
  <input class="Check1" name="Check1" type="radio" id="BCheck" value="青">青
  <input class="Check1" name="Check1" type="radio" id="YCheck" value="黄色">黄色

<h4>好きな色２つ目</h4>
  <input class="Check2" name="Check2" type="radio" id="GCheck" value="緑">緑
  <input class="Check2" name="Check2" type="radio" id="OCheck" value="オレンジ">オレンジ

<a href="#" id="btn">結果を表示する</a>

<div id="rg">赤と緑</div>
<div id="ro">赤とオレンジ</div>

<div id="bg">青と緑</div>
<div id="bo">青とオレンジ</div>

<div id="yg">黄色と緑</div>
<div id="yo">黄色とオレンジ</div>

例えば好きな色1つ目で青を選び、2つ目でオレンジを選んだ場合、
<a href="#bo"> になるようにしたいです。

どう記述すれば2つのラジオボタンの値をまとめて取れるのかが
正直さっぱりわかりません・・・

$('input[name=Check1]:eq(0)').prop('checked');でラジオボタンが選択されているかを取得する、
$('input[name=Check1]').val();でどのラジオボタンが選択されているのかを取得する、
といったことがやっと分かるレベルです。

ご助力いただけると嬉しいです。よろしくお願いいたします。

m.ts10806

2017/09/07 08:18

ラジオボタンの現在チェックされている情報の取得について何か調べたりやってみたことがあれば追記してください。

mochimochiko

2017/09/07 08:29

追記させていただきました。かなりの初心者でお恥ずかしい限りです・・・。ご指摘有難うございます！

行動規範の内容に同意します

回答2件

ベストアンサー

データの拾い方次第ですが、こんな感じでどうでしょうか？

javascript
1$(function(){
2  $('#btn').on('click',function(){
3    var c1=$('input[name=Check1]:checked');
4    var c2=$('input[name=Check2]:checked');
5    if(c1.length==1 && c2.length==1){
6      $(this).attr('href','#'+c1.data('str')+c2.data('str'));
7    }
8  });
9});

HTML
1<h4>好きな色１つ目</h4>
2  <input class="Check1" name="Check1" type="radio" id="RCheck" value="赤" data-str="r">赤
3  <input class="Check1" name="Check1" type="radio" id="BCheck" value="青" data-str="b">青
4  <input class="Check1" name="Check1" type="radio" id="YCheck" value="黄色" data-str="y">黄色
5
6<h4>好きな色２つ目</h4>
7  <input class="Check2" name="Check2" type="radio" id="GCheck" value="緑" data-str="g">緑
8  <input class="Check2" name="Check2" type="radio" id="OCheck" value="オレンジ" data-str="o">オレンジ
9
10<a href="#" id="btn">結果を表示する</a>
11
12<div id="rg">赤と緑</div>
13<div id="ro">赤とオレンジ</div>
14
15<div id="bg">青と緑</div>
16<div id="bo">青とオレンジ</div>
17
18<div id="yg">黄色と緑</div>
19<div id="yo">黄色とオレンジ</div>

投稿2017/09/07 08:27

yambejp

総合スコア114775

mochimochiko

2017/09/07 09:25

大変迅速かつ、記述方法が大変分かりやすかったのでベストアンサーさせていただきました。 data属性とても便利ですね・・・！勉強になりました！この度は誠にありがとうございました！

行動規範の内容に同意します

onclick

jQuery 便利なonを使おう（on click)

ラジオボタンの値取得

【jQuery】ラジオボタンの状態取得と選択制御

例えば、
onclick時の処理に下記のように書けば、値(valueに設定してある情報)が取得できます。

javascript
1alert($('input[name=Check1]:checked').val());
2alert($('input[name=Check2]:checked').val());

ただし、未選択時はundefinedとなるので、いずれも選択されていない場合のチェックはtypeofで判定入れておいたほうが良いでしょう。

javascript
1    if(typeof($('input[name=Check1]:checked').val()) === "undefined" || typeof($('input[name=Check1]:checked').val()) === "undefined"){
2        alert("いずれか選択してください");
3    }else{
4      //両方チェックされてるときの処理        
5    }