色々試してみたのですが、
うまくいかないため教えていただきたいです。
下記のような計算機能を作りたいです。

カード値段×チームの希望個数の合計＝値段合計

現在のテキストから値段を取得する方法ではなく、
inputのvalueから値段を取得する方法に変更し、
チェックをすべて外したときは0円に戻るようにしたいです。
その合計金額もリアルタイム表示するにはどうすればよいでしょうか？

html
1<section>
2<dl id="team">
3<dt><label>チーム</label></dt>
4<dd>
5<p>A　<input type="number" placeholder="0"></p>
6<p>B　<input type="number" placeholder="0"></p>
7<p>C　<input type="number" placeholder="0"></p></dd>
8</dl>
9
10<dl id="sum_card">
11<dt><label>個数合計</label></dt>
12<dd id="sum_number">
13<input type="number" placeholder="0" id="sum_quantity"></dd>
14</dl>
15</section>
16
17
18<div>
19<form>
20<div>
21<ul>
22<li>
23<input type="checkbox" class="select-checkbox" id="select-checkbox-01" name="select-checkbox" value="100">
24<label for="select-checkbox-01" class="item-info">
25<div class="check-img"></div>
26<div class="ttl">カード1</div>
27<div class="price">100円</div>
28</label>
29</li>
30<li>
31<input type="checkbox" class="select-checkbox" id="select-checkbox-02" name="select-checkbox" value="180">
32<label for="select-checkbox-02" class="item-info">
33<div class="check-img"></div>
34<div class="ttl">カード2</div>
35<div class="price">180円</div>
36</label>
37</li>
38<li>
39<input type="checkbox" class="select-checkbox" id="select-checkbox-03" name="select-checkbox" value="400">
40<label for="select-checkbox-03" class="item-info">
41<div class="check-img"></div>
42<div class="ttl">カード3</div>
43<div class="price">400円</div>
44</label>
45</li>
46<li>
47<input type="checkbox" class="select-checkbox" id="select-checkbox-04" name="select-checkbox" value="1100">
48<label for="select-checkbox-04" class="item-info">
49<div class="check-img"></div>
50<div class="ttl">カード4</div>
51<div class="price">1,100円</div>
52</label>
53</li>
54</ul>
55</div>
56</form>
57</div>
58
59
60<div>値段合計<span><span class="price-chg" id="price-chg">0</span>円</span>
61</div>

jQuery
1document.addEventListener('input',()=>{
2var card_quantity = $("#number_card dd p input").get().reduce((s, e) => +e.value + s, 0); //各枚数を合計
3
4$("dl#sum_card dd input").val(card_quantity); //合計枚数を書き出す
5
6//チェックした値段×枚数
7$('#sum_quantity,.select-checkbox').on('input',function(){
8var quantity=isNaN($('#sum_quantity').val())?0:parseInt($('#sum_quantity').val());
9
10var price=$('.select-checkbox:checked').next().children('.price').map(function(){
11return parseInt($(this).text().replace(/[^0-9]/g,''));
12}).get().reduce(function(x,y){
13return x+y;
14});
15　//合計を書き出す
16$('#price-chg').text(quantity*price);
17});
18
19});

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

回答2件

ベストアンサー

ああ、A,B,Cは足せばよかったんですね・・・
またチェックボックスにvalueを付加したのは良いと思います
jQueryと普通のjsを混ぜるのは微妙ですね

javascript
1<script>
2document.addEventListener('input',()=>{
3  const q=[...document.querySelectorAll('#team [type="number"]')].map(x=>parseInt(x.value||0)).reduce((x,y)=>x+y);
4  const p=[...document.querySelectorAll('.select-checkbox:checked')].map(x=>parseInt(x.value)).reduce((x,y)=>x+y,0);
5  document.querySelector('#sum_quantity').value=q;
6  document.querySelector('#price-chg').textContent=(q*p).toLocaleString();
7
8});
9</script>
10<section>
11<dl id="team">
12<dt><label>チーム</label></dt>
13<dd>
14<p>A　<input type="number" placeholder="0"></p>
15<p>B　<input type="number" placeholder="0"></p>
16<p>C　<input type="number" placeholder="0"></p></dd>
17</dl>
18
19<dl id="sum_card">
20<dt><label>個数合計</label></dt>
21<dd id="sum_number">
22<input type="number" placeholder="0" id="sum_quantity"></dd>
23</dl>
24</section>
25
26
27<div>
28<form>
29<div>
30<ul>
31<li>
32<input type="checkbox" class="select-checkbox" id="select-checkbox-01" name="select-checkbox" value="100">
33<label for="select-checkbox-01" class="item-info">
34<div class="check-img"></div>
35<div class="ttl">カード1</div>
36<div class="price">100円</div>
37</label>
38</li>
39<li>
40<input type="checkbox" class="select-checkbox" id="select-checkbox-02" name="select-checkbox" value="180">
41<label for="select-checkbox-02" class="item-info">
42<div class="check-img"></div>
43<div class="ttl">カード2</div>
44<div class="price">180円</div>
45</label>
46</li>
47<li>
48<input type="checkbox" class="select-checkbox" id="select-checkbox-03" name="select-checkbox" value="400">
49<label for="select-checkbox-03" class="item-info">
50<div class="check-img"></div>
51<div class="ttl">カード3</div>
52<div class="price">400円</div>
53</label>
54</li>
55<li>
56<input type="checkbox" class="select-checkbox" id="select-checkbox-04" name="select-checkbox" value="1100">
57<label for="select-checkbox-04" class="item-info">
58<div class="check-img"></div>
59<div class="ttl">カード4</div>
60<div class="price">1,100円</div>
61</label>
62</li>
63</ul>
64</div>
65</form>
66</div>
67
68
69<div>値段合計<span><span class="price-chg" id="price-chg">0</span>円</span>
70</div>

IE対応

javascript
1["input","change"].forEach(function(x){
2  document.addEventListener(x,callback);
3});;
4function callback(){
5  const q=[].map.call(document.querySelectorAll('#team [type="number"]'),function(x){
6    return parseInt(x.value||0);
7  }).reduce(function(x,y){
8    return x+y;
9  });
10  const p=[].map.call(document.querySelectorAll('.select-checkbox:checked'),function(x){
11    return parseInt(x.value);
12  }).reduce(function(x,y){
13    return x+y;
14  },0);
15  document.querySelector('#sum_quantity').value=q;
16  document.querySelector('#price-chg').textContent=(q*p).toLocaleString();
17};

投稿2021/03/21 02:18

編集2021/03/21 10:10

yambejp

総合スコア116724

up24

2021/03/21 09:20

ありがとうございます。はい。valueに値段入れました。こちらのほうが使いやすそうです。これらの機能をIE11でも動作可能なようにしたいのですが可能でしょうか。

yambejp

2021/03/21 10:12

IE対応にしておきました IEは以下対応していません・スプレッド構文・アロー関数・チェックボックスのinputイベント

up24

2021/03/22 03:39

>・チェックボックスのinputイベントこちらはIE11対応していないのですね。勉強になります。

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

寝ぼけているかも

js
1<!DOCTYPE html>
2<meta charset='UTF-8'>
3<body> 
4<section>
5  <dl id="team">
6    <dt><label>チーム</label></dt>
7    <dd>
8      <p>A　<input type="number" min="0" value="0"></p>
9      <p>B　<input type="number" min="0" value="0"></p>
10      <p>C　<input type="number" min="0" value="0"></p>
11    </dd>
12  </dl>
13
14  <dl id>
15    <dt><label>個数合計</label></dt>
16    <dd>
17      <output id="sum_quantity">0</output>
18    </dd>
19  </dl>
20</section>
21
22
23<div>
24  <form>
25    <div>
26      <ul>
27        <li>
28          <input type="checkbox" name="select-checkbox" value="100">
29          <label class="item-info">
30            <div class="check-img"></div>
31            <div class="ttl">カード1</div>
32            <div class="price">100円</div>
33          </label>
34        <li>
35          <input type="checkbox" name="select-checkbox" value="180">
36          <label class="item-info">
37            <div class="check-img"></div>
38            <div class="ttl">カード2</div>
39            <div class="price">180円</div>
40          </label>
41        <li>
42          <input type="checkbox" name="select-checkbox" value="400">
43          <label class="item-info">
44            <div class="check-img"></div>
45            <div class="ttl">カード3</div>
46            <div class="price">400円</div>
47          </label>
48        <li>
49          <input type="checkbox" name="select-checkbox" value="1100">
50          <label class="item-info">
51            <div class="check-img"></div>
52            <div class="ttl">カード4</div>
53            <div class="price">1,100円</div>
54          </label>
55      </ul>
56    </div>
57  </form>
58</div>
59
60
61  <div>値段合計<span><output class="price-chg" id="price-chg">0</output>円</span>
62</div>
63
64
65<script>
66
67function handler (event) {
68  const
69    sum = (a, b)=> a + Number (b.value),
70    kosu = [...document.querySelectorAll ('#team input[type="number"]')].reduce (sum, 0),
71    card = [...document.querySelectorAll ('input[name="select-checkbox"]:checked')].reduce (sum, 0);
72  sum_quantity.value = kosu;
73  document.getElementById("price-chg").value = kosu * card;
74}
75document.addEventListener ('input', handler, false);
76
77</script>
78