jsを利用してラジオボタンとチェックボックスで選択しているものを特定の商品に加点方式に

Question

実現したいこと

フォームのラジオボタンとチェックボックスを選択していき、表画像のように各商品にだけ0か1ずつ加点していき合計点数を出したい。
そして合計点数が高い商品2つを表示したい商品と紐づけてopenというクラスを付与したい。
合計点数を出すまではできたが、紐づける方法が全くわからない。
JS初心者でソースも汚いです。

発生している問題・分からないこと

今の方法では配列の商品1とクラスの$("itemimg1")などの紐付けができない気がする。

該当のソースコード

	<form action="" id="form">
		<div class="inner">
			<h1>質問1</h1>
			<label for=""><input type="radio" id="qa01_01" name="qa01" value="11111">軽い</samp></label>
			<label for=""><input type="radio" id="qa01_02" name="qa01" value="01111">重い</label>
		</div>
		<div class="inner">
			<h1>質問2</h1>
			<label for="qa02_01"><input type="radio" id="qa02_01" name="qa02" value="00101">大きい</label>
			<label for="qa02_02"><input type="radio" id="qa02_02" name="qa02" value="10000">小さい</label>
		</div>
		<div class="inner">
			<h1>質問3</h1>
			<label for="qa03_01"><input type="radio" id="qa03_01" name="qa03" value="00011">硬い</label>
			<label for="qa03_02"><input type="radio" id="qa03_02" name="qa03" value="11100">柔らかい</label>
			<label for="qa03_03"><input type="radio" id="qa03_03" name="qa03" value="00011">普通</label>
		</div>
		<div class="inner">
			<h1>質問4</h1>
			<label for="qa04_01"><input type="checkbox" id="qa04_01" name="qa04" value="01011"/>赤</label>
			<label for="qa04_02"><input type="checkbox" id="qa04_02" name="qa04" value="10001"/>青</label>
			<label for="qa04_03"><input type="checkbox" id="qa04_03" name="qa04" value="00010"/>黄色</label>
		</div>
			<input type="button" class="btn" value="送信する">
	</form>
	<div class="itemimg1">item01</div>
	<div class="itemimg2">item02</div>
	<div class="itemimg3">item03</div>
	<div class="itemimg4">item04</div>
	<div class="itemimg5">item05</div>

var item = ['商品1' , '商品2' , '商品3' , '商品4' , '商品5'];
item[0] = $(".itemimg1");
item[1] = $(".itemimg2");
item[2] = $(".itemimg3");
item[3] = $(".itemimg4");
item[4] = $(".itemimg5");

$('input:button').click(function() {

var qa01 = $('input[name="qa01"]:checked').val();
var qa02 = $('input[name="qa02"]:checked').val();
var qa03 = $('input[name="qa03"]:checked').val();
var qa04 = $('input[name="qa04"]:checked').val();

for (let i = 0; i < 5; i++ ) {
	item[i] = Number(qa01[i]) + Number(qa02[i]) + Number(qa03[i]) + Number(qa04[i]);
	console.log(item[i]);
}


function compareFunc(a, b) {
  return b - a;
}
newitem = item.sort(compareFunc);
console.log(newitem);

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

ifを試してり、色々してみたができる気がしない

補足

特になし

Comments

[Lhankor_Mhy]

もう少し詳しくお願いします。たとえば、「表の特定の商品」をどうやって特定するのか、など。

[退会済みユーザー]

説明不足ですいません。
特定の商品というか、
例えば質問1の「軽い」を選択したら全商品に0か1を割り当てるという認識です。

[Lhankor_Mhy]

もう少し詳しくお願いします。
たとえば、「軽い」を選択したときに「商品1」行の「軽い」列には、どういうルールに基づいて0と1のどちらを割り当てるのか、などを教えてください。（サンプルでは1が割り当てられているようです）

Answer 1

元のコードを生かすならこんな感じではないでしょうか。

//...

for (let i = 0; i < 5; i++) {
    item[i].data('test', Number(qa01[i]) + Number(qa02[i]) + Number(qa03[i]) + Number(qa04[i]));
    console.log(item[i]);
}


function compareFunc(a, b) {
    return b.data('test') - a.data('test');
}
newitem = item.sort(compareFunc);
console.log(newitem);
item.forEach(x => x.hide());
item[0].show();
item[1].show();

Answer 2

ちょっと曖昧なので一旦こちらをご確認ください
想定している動作と違うようでしたら具体的に希望を明示ください

<style>
.open{background-Color:yellow;}
</style>

<script>
document.addEventListener('change',()=>{
  ['goods1','goods2','goods3','goods4','goods5'].reduce((x,y)=>{
    const l=document.querySelectorAll(`tbody .${y}:checked`).length;
    document.querySelector(`tfoot .${y}`).textContent=l;
    x.push([y,l]);
    return x;
  },[]).sort((x,y)=>y[1]-x[1]).forEach((x,y)=>{
    document.querySelector(`thead .${x[0]}`).classList.toggle('open',y<2);
  });
});
</script>
<table border>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
<th class="goods1">商品1</th>
<th class="goods2">商品2</th>
<th class="goods3">商品3</th>
<th class="goods4">商品4</th>
<th class="goods5">商品5</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">質問1</td>
<td>軽い</td>
<td><input type="checkbox" class="goods1"></td>
<td><input type="checkbox" class="goods2"></td>
<td><input type="checkbox" class="goods3"></td>
<td><input type="checkbox" class="goods4"></td>
<td><input type="checkbox" class="goods5"></td>
</tr>
<tr>
<td>重い</td>
<td><input type="checkbox" class="goods1"></td>
<td><input type="checkbox" class="goods2"></td>
<td><input type="checkbox" class="goods3"></td>
<td><input type="checkbox" class="goods4"></td>
<td><input type="checkbox" class="goods5"></td>
</tr>
<tr>
<td rowspan="2">質問2</td>
<td>大きい</td>
<td><input type="checkbox" class="goods1"></td>
<td><input type="checkbox" class="goods2"></td>
<td><input type="checkbox" class="goods3"></td>
<td><input type="checkbox" class="goods4"></td>
<td><input type="checkbox" class="goods5"></td>
</tr>
<tr>
<td>小さい</td>
<td><input type="checkbox" class="goods1"></td>
<td><input type="checkbox" class="goods2"></td>
<td><input type="checkbox" class="goods3"></td>
<td><input type="checkbox" class="goods4"></td>
<td><input type="checkbox" class="goods5"></td>
</tr>
<tr>
<td rowspan="3">質問3</td>
<td>硬い</td>
<td><input type="checkbox" class="goods1"></td>
<td><input type="checkbox" class="goods2"></td>
<td><input type="checkbox" class="goods3"></td>
<td><input type="checkbox" class="goods4"></td>
<td><input type="checkbox" class="goods5"></td>
</tr>
<tr>
<td>柔らかい</td>
<td><input type="checkbox" class="goods1"></td>
<td><input type="checkbox" class="goods2"></td>
<td><input type="checkbox" class="goods3"></td>
<td><input type="checkbox" class="goods4"></td>
<td><input type="checkbox" class="goods5"></td>
</tr>
<tr>
<td>普通</td>
<td><input type="checkbox" class="goods1"></td>
<td><input type="checkbox" class="goods2"></td>
<td><input type="checkbox" class="goods3"></td>
<td><input type="checkbox" class="goods4"></td>
<td><input type="checkbox" class="goods5"></td>
</tr>
<tr>
<td rowspan="3">質問4</td>
<td>赤</td>
<td><input type="checkbox" class="goods1"></td>
<td><input type="checkbox" class="goods2"></td>
<td><input type="checkbox" class="goods3"></td>
<td><input type="checkbox" class="goods4"></td>
<td><input type="checkbox" class="goods5"></td>
</tr>
<tr>
<td>青</td>
<td><input type="checkbox" class="goods1"></td>
<td><input type="checkbox" class="goods2"></td>
<td><input type="checkbox" class="goods3"></td>
<td><input type="checkbox" class="goods4"></td>
<td><input type="checkbox" class="goods5"></td>
</tr>
<tr>
<td>黄色</td>
<td><input type="checkbox" class="goods1"></td>
<td><input type="checkbox" class="goods2"></td>
<td><input type="checkbox" class="goods3"></td>
<td><input type="checkbox" class="goods4"></td>
<td><input type="checkbox" class="goods5"></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">合計点数</th>
<th><span class="goods1">0</span></th>
<th><span class="goods2">0</span></th>
<th><span class="goods3">0</span></th>
<th><span class="goods4">0</span></th>
<th><span class="goods5">0</span></th>
</tr>
</tfoot>
</table>