nameが異なるradioボタンをcheckboxのように使いたい

Question

前提・実現したいこと

nameが異なるradioボタンをcheckboxのように使いたいです。

該当のソースコード

<div class="form-list">
  <p>年数</p>
  <input type="radio" id="year01" name="year1" value="2年"><label for="year01">2年</label>
  <input type="radio" id="year02" name="year2" value="3年"><label for="year02">3年</label>
  <input type="radio" id="year03" name="year3" value="4年"><label for="year03">4年</label>
</div>

現状は上記のような状態で、調べて見てもcssの記事ばかりで
参考になりそうなものが見つからなかったため質問させていただきました。

動きは通常のradioボタンのように別を押したら他の場所の選択が解除されるようにしたいです。
異なるnameにしている理由ですがphpの配列で下記のようなデータを持っていて、

"year1"=>"2年",
"year2"=>"3年",
"year3"=>"-",

それぞれ分けて使いたいためです。
ご教示のほどよろしくお願いします。

Answer 1

document.addEventListener("DOMContentLoaded", evt => {
  const yearRadios = Array.from(document.querySelectorAll("input[type=radio][name^=year]"));
  yearRadios.forEach(radio => {
    radio.addEventListener("change", evt => yearRadios.forEach(radio => radio.checked = radio.id === evt.target.id));
  });
});

Comments

[MeB]

ご回答ありがとうございます。
すみません。うまくうごきませんでした。
https://jsfiddle.net/g3zn20av/3/

[root_jp]

JSFiddleで動かすなら、設定のLoad TypeをNo wrapにするか
以下のように一番外側のDOMContentLoadedの部分を削除してください。
const yearRadios = Array.from(document.querySelectorAll("input[type=radio][name^=year]"));
yearRadios.forEach(radio => {
radio.addEventListener("change", evt => yearRadios.forEach(radio => radio.checked = radio.id === evt.target.id));
});

[root_jp]

jQueryを使うなら、タグにjQueryを書いた方が適した回答もらえると思いますよ。

Answer 2

こうですかね？

<script>
window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll('.year'),function(x){
    x.addEventListener('change',function(e){
      [].forEach.call(document.querySelectorAll('.year'),function(y){
        y.checked=(y===x);
      });
    });
  });
});
</script>
<div class="form-list">
  <p>年数</p>
  <label><input type="radio" name="year1" class="year" value="2年">2年</label>
  <label><input type="radio" name="year2" class="year" value="3年">3年</label>
  <label><input type="radio" name="year3" class="year" value="4年">4年</label>
</div>

checkboxのように消せる

<script>
window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll('[type=radio][name^=year]'),function(x){
    var flg=true;
    x.addEventListener('focus',function(e){
      if(!x.checked) flg=false; 
    });
    x.addEventListener('click',function(e){
        if(x.checked && flg) x.checked=false;
        flg=!flg;
    });
    x.addEventListener('change',function(e){
      [].forEach.call(document.querySelectorAll('[type=radio][name^=year]:checked'),function(y){
        y.checked=(y===x);
      });
    });
  });
});
</script>
<div class="form-list">
  <p>年数</p>
  <label><input type="radio" name="year1" value="2年">2年</label>
  <label><input type="radio" name="year2" value="3年">3年</label>
  <label><input type="radio" name="year3" value="4年">4年</label>
</div>

Comments

[yambejp]

ちなみにcheckboxのようにの仕様に
「チェックされている要素をクリックするとチェックが消える」
を実装するかしないかで調整が必要

[MeB]

ご回答ありがとうございます。
1つ目をクリックしていた場合
２つ目をクリックすると1つ目のチェックは外れる
というのは不可能ということでしょうか？

[yambejp]

いや、それは提示したソースで実現しています。
そうではなくチェックボックスは自分自身をつけたり消したりできます
ラジオボタンは一度ついたら消すことができません

[yambejp]

チェックボックスのような挙動をするバージョンを追記しておきました