チェックボックスとラジオボタンの連動

特定のボタンを選択でテキストエリアのON/OFFなどの情報は見つかったのですが、項目の連動についての情報が無かったので質問させてください。

例えばページ内にA、B、Cというラジオボタンがあります。
このいずれかを選択すると、同一ページ内にある a、b、c　という、今度はチェックボックスにチェックが入るようにしたいのですが…。

A=a
B=b
C=c
といったイメージです。

よろしくお願いいたします。><

No.1 ベストアンサー 回答者： yambejp 回答日時： 2016/09/02 11:45

ラジオボタンとチェックボックスは仕様が違うので完全にリンクするのは難しいですが

jQueryを使うならこんな感じで

<script>
$(function(){
var r2c={"A":"a","B":"b","C":"c"};
var c2r={"a":"A","b":"B","c":"C"};
$('[name=hoge]').click(function(){
$('.fuga').prop('checked',false);
$('input[name='+r2c[$(this).val()]+']').prop('checked',true);
});
$('.fuga').click(function(){
var me=$(this)[0];
$('.fuga').each(function(){
if($(this)[0]!==me) $(this).prop('checked',false);
});
$('input[name=hoge][value='+c2r[$(this).prop('name')]+']').prop('checked',$(this).prop('checked'));
});
});
</script>
A:<input type="radio" name="hoge" value="A" checked>
B:<input type="radio" name="hoge" value="B">
C:<input type="radio" name="hoge" value="C">
<hr>
a:<input type="checkbox" name="a" class="fuga" value="1" checked>
b:<input type="checkbox" name="b" class="fuga" value="1">
c:<input type="checkbox" name="c" class="fuga" value="1">

この回答へのお礼

yambejp 様
ありがとうございます！
ご回答頂いたソースで連動するのが確認できました、思っていたより難しいのですね…。
このソースを紐解いて、勉強したいと思います。

とても助かりました、ありがとうございます！m(_ _)m

お礼日時：2016/09/02 15:07