ABCチームとABチームに応じた合計

チームが必要とする個数に応じて、選択したカード「1,2合計(1,2どちらかのみ選択可)」「3,4,5合計」の金額を表示したいです。
その時、カードの中でもABCチームに対応したものとABチームにしか対応していないものとがあります。
それぞれの値段が合計金額に反映されるようにしたいのですが、
どうすればよいでしょうか。

※class="select__card"配下は外部ファイルを読み込んでいるため、直接いじることができません。

html
1<dl id="number__team"> <dt><label>チーム</label></dt>
2  <dd>
3    <p id="number__team__a" class="quantity_abc quantity_ab">A <input type="number"> </p>
4    <p id="number__team__b" class="quantity_abc quantity_ab"> B <input type="number"> </p>
5    <p id="number__team__c" class="quantity_abc quantity_c">C <input type="number"> </p>
6  </dd>
7</dl>
8<dl id="sum__team"> <dt><label>個数合計</label></dt>
9  <dd> <input type="text" name="sum__quantity" id="sum__quantity" size="60" value="0"> </dd>
10</dl>
11<table class="price__list">
12  <tbody>
13    <tr class="align-items-center area_price_1 edition_base">
14      <td>
15        <div>
16          <ul>
17            <li class="select__card" style="list-style:none;"> <span style="display:block">
18      <label>
19        <input type="radio" name="group_1" value="100">
20        <span>カード1 ※ABC対応</span> </label>
21              </span> <span style="display:block">
22		<label>
23			<input type="radio" name="group_1" value="200">
24			<span>カード2 ※AB対応</span> </label>
25              </span>
26            </li>
27          </ul>
28        </div>
29      </td>
30      <td>
31        <ul>
32          <li>￥100</li>
33          <li>￥200</li>
34        </ul>
35      </td>
36      <td>
37        <ul>
38          <li><input type="text" name="sum_price_1" size="10" value="" placeholder="0" class=""> </li>
39        </ul>
40      </td>
41    </tr>
42    <tr class="area_price_2">
43      <td>
44        <div>
45          <ul>
46            <li class="select__card" style="list-style:none;">
47              <span style="display:block">
48                <label style="display:block">
49                 <input type="checkbox" name="group_2" value="300">
50                 <span>カード3 ※ABC対応</span> </label>
51              </span> 
52              <span>
53                <label style="display:block">
54                  <input type="checkbox" name="group_2" value="400">
55                    <span>カード4 ※ABC対応</span> </label>
56              </span>
57              <span>
58                   <label style="display:block">
59                   <input type="checkbox" name="group_2" value="500">
60                    <span>カード5 ※AB対応</span> </label>              
61              </span>
62            </li>
63          </ul>
64        </div>
65      </td>
66      <td>
67        <ul>
68          <li>￥300</li>
69          <li>￥400</li>
70          <li>￥500</li>          
71        </ul>
72      </td>
73      <td>
74        <ul>
75          <li><input type="text" name="sum_price_2" size="10" value="" placeholder="0"></li>
76        </ul>
77      </td>
78    </tr>
79  </tbody>
80</table>

javascript
1
2  document.addEventListener('input',()=>{
3
4    // 個数ABC
5    const quantity_abc=[...document.querySelectorAll('#number__team dd p.quantity_abc input')].map(x=>parseInt(x.value||0)).reduce((x,y)=>x+y);
6    document.querySelector('#sum__quantity').value=quantity_abc;
7   
8    // 個数AB のみ
9    const quantity_ab=[...document.querySelectorAll('#number__team dd p.quantity_ab input')].map(x=>parseInt(x.value||0)).reduce((x,y)=>x+y);
10    
11    // ラジオボタン値段 ABC
12    const price_ab_r1=[...document.querySelectorAll('tr.area_price_1.edition_base li span:nth-child(1) input:checked')].map(x=>parseInt(x.value)).reduce((x,y)=>x+y,0);
13    document.querySelector('input[name="sum_price_1"]').value=(quantity_ab*price_ab_r1).toLocaleString();
14
15    // ラジオボタン値段 AB
16    const price_ab_r2=[...document.querySelectorAll('tr.area_price_1.edition_base li span:nth-child(2) input:checked')].map(x=>parseInt(x.value)).reduce((x,y)=>x+y,0);
17    document.querySelector('input[name="sum_price_1"]').value=(quantity_ab*price_ab_r2).toLocaleString();    
18    
19    // チェックボックス値段 ABC
20    const price_abc_c1=[...document.querySelectorAll('tr.area_price_2 li input:checked')].map(x=>parseInt(x.value)).reduce((x,y)=>x+y,0);
21    document.querySelector('input[name="sum_price_2"]').value=(quantity_abc*price_abc_c1).toLocaleString();
22
23    // チェックボックス値段 AB   
24    const price_ab_c2=[...document.querySelectorAll('tr.area_price_2 li span:nth-child(3) input:checked')].map(x=>parseInt(x.value)).reduce((x,y)=>x+y,0);
25    document.querySelector('input[name="sum_price_2"]').value=(quantity_ab*price_ab_c2).toLocaleString();
26
27    
28  });
29

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

回答1件

実装方法はいろいろあるかと思いますが一例として。

Javascript
1<script>
2timer = setInterval(doCalc, 200);
3function doCalc() {
4	let teamA = parseInt(document.querySelector('#number__terminal__android input').value);
5	let teamB = parseInt(document.querySelector('#number__terminal__ios input').value);
6	let teamC = parseInt(document.querySelector('#number__terminal__windows input').value);
7	teamA = isNaN(teamA) ? 0: teamA;
8	teamB = isNaN(teamB) ? 0: teamB;
9	teamC = isNaN(teamC) ? 0: teamC;
10	//個数合計
11	document.getElementById('sum__quantity').value = teamA + teamB + teamC;
12	
13	const card = document.querySelectorAll('li.select__card label > input');
14	const sumCard1 = (card[0].checked) ? (100 * (teamA + teamB + teamC)): 0; 
15	const sumCard2 = (card[1].checked) ? (200 * (teamA + teamB)): 0; 
16	const sumCard3 = (card[2].checked) ? (300 * (teamA + teamB + teamC)): 0; 
17	const sumCard4 = (card[3].checked) ? (400 * (teamA + teamB + teamC)): 0; 
18	const sumCard5 = (card[4].checked) ? (500 * (teamA + teamB)): 0; 
19	//カード小計
20	document.querySelector('tr.area_price_1 td:nth-child(3) input').value = sumCard1 + sumCard2;
21	document.querySelector('tr.area_price_2 td:nth-child(3) input').value = sumCard3 + sumCard4 + sumCard5;
22}
23</script>