複数のラジオボタンをjsで取得する方法

html
1
2<div class="qa" id="qa01">
3	<div class="question">
4		<span>Question1</span>
5		<p>学生である</p>
6	</div>
7	<div class="answer">
8		<label for="radio01">
9			<input type="radio" name="radio" value="01" class="input" id="radio01"/>
10			はい
11		</label>
12		<label for="radio02">
13			<input type="radio" name="radio" value="02" class="input" id="radio02"/>
14			いいえ
15		</label>
16	</div>
17</div>
18<div class="qa" id="qa02">
19	<div class="question">
20		<span>Question1</span>
21		<p>恋人はいる</p>
22	</div>
23	<div class="answer">
24		<label for="radio03">
25			<input type="radio" name="radio" value="01" class="input" id="radio03"/>
26			はい
27		</label>
28		<label for="radio04">
29			<input type="radio" name="radio" value="02" class="input" id="radio04"/>
30			いいえ
31		</label>
32	</div>
33</div>
34

jsでラジオボタンの値を取得して、取得した値の数値の「01」が2個以上の場合とそうでない場合の条件分岐を作りたいです。

調べでも方法が全く出てきませんでした。
知っている方がいらっしゃれば、ご教授いただければ、幸いです。

miyabi_pudding

2020/11/11 07:55

> 調べでも方法が全く出てきませんでした。なんというキーワードで調査したのでしょうか？また、本当に全く参考になる記事がなかったのでしょうか？

ntttt

2020/11/11 09:15

「ラジオボタン　値　取得　js」などで調べました。一つの質問の答えのみを値として取得する記事しか見つけることができませんでした。今回のように複数の質問の答え同時に取得する方法を知りたかったので、目的に合う記事がなかったです。

miyabi_pudding

2020/11/11 09:22

一発でやろうとしないことが大事になるかと思います。一つの記事では解決しなく、複数の方法を組み合わせる必要があるかと思います。まず、一つのラジオボタンの値を取得する、まではいけたのではないでしょうか？ならば、次は、”複数の要素の値を取得”になります。なので、まず、"複数の要素を取得する方法"を探します。そして、その複数の要素に対して、"値を取得する"という先ほど見つけた手法を組み合わせます。大抵は、端端の一個一個の技術しか記事になっていませんので、複数の技術を組み合わせる必要はでてきます。（今回の場合はそう）あと一歩、そのように探されるといいかと。

kei344

2020/11/11 09:26

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

ntttt

2020/11/11 09:35

おっしゃる通りです。「一つのラジオボタンの値を取得する」という方法は見つけることができました。それからは組み合わせることなど考えず、一発で目的の記事にたどり着きたいという考えしかありませんでした。プログラミングをするうえで非常に重要なことだと思いますので、これからはもう少し組み合わせる力を身に付けていきます。ありがとうございました。

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

回答2件

ベストアンサー

まずラジオボタンのnameが全部同じだとそもそも複数選択できないのでそこは直して頂いて、あとはこんな感じになるかと思います。

https://jsfiddle.net/097pfkmw/

jQuery
1$('#checkCount').click(function(){
2	// 選択されている値を取得
3	const checkedAry = $('.answer input:checked').map((i,e)=>$(e).attr('value')).get();
4	console.log( '選択されている値 =', checkedAry );
5	// 01を数える
6	const targetVal = '01';
7	const targetLen = 2;
8	const count = checkedAry.filter(function(x){return x==targetVal}).length;
9	console.log( targetVal+'の数 =', count );
10	// 条件分岐
11	if ( count >= targetLen ) {
12		console.log(targetVal+'は'+targetLen+'個以上あります');
13	} else {
14		console.log(targetVal+'は'+count+'個です');
15	}
16});