前提・実現したいこと

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

該当のソースコード

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

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

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

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

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

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

回答2件

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

投稿2018/09/07 01:11

編集2018/09/07 01:15

root_jp

総合スコア4666

MeB

2018/09/07 01:38

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

root_jp

2018/09/07 02:23

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

2018/09/07 02:25

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

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

ベストアンサー

こうですかね？

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function(e){
3  [].forEach.call(document.querySelectorAll('.year'),function(x){
4    x.addEventListener('change',function(e){
5      [].forEach.call(document.querySelectorAll('.year'),function(y){
6        y.checked=(y===x);
7      });
8    });
9  });
10});
11</script>
12<div class="form-list">
13  <p>年数</p>
14  <label><input type="radio" name="year1" class="year" value="2年">2年</label>
15  <label><input type="radio" name="year2" class="year" value="3年">3年</label>
16  <label><input type="radio" name="year3" class="year" value="4年">4年</label>
17</div>

checkboxのように消せる

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function(e){
3  [].forEach.call(document.querySelectorAll('[type=radio][name^=year]'),function(x){
4    var flg=true;
5    x.addEventListener('focus',function(e){
6      if(!x.checked) flg=false; 
7    });
8    x.addEventListener('click',function(e){
9        if(x.checked && flg) x.checked=false;
10        flg=!flg;
11    });
12    x.addEventListener('change',function(e){
13      [].forEach.call(document.querySelectorAll('[type=radio][name^=year]:checked'),function(y){
14        y.checked=(y===x);
15      });
16    });
17  });
18});
19</script>
20<div class="form-list">
21  <p>年数</p>
22  <label><input type="radio" name="year1" value="2年">2年</label>
23  <label><input type="radio" name="year2" value="3年">3年</label>
24  <label><input type="radio" name="year3" value="4年">4年</label>
25</div>