javascriptでラジオボタンをチェックした時、valueや入力値を計算したい

ラジオボタンやチェックボックスを選択するとvalueに当てられた値を計算し、各ブロックの小計と全ブロックの総合計を算出するフォームを作成しています。
単体のラジオボタンやチェックボックスの計算はできたのですが、multiple欄のテキストボックスに任意で数値を入力した場合に、inputのvalueの値　×　入力欄の任意の値の計算がどうしてもできません。

よろしくお願いします。

HTML

<form action="">
  <div class="category">
    [Group-A]
    <label><input type="checkbox" class="value" value="100">100</label>　
    <label><input type="checkbox" class="value" value="200">200</label>　
    <label><input type="checkbox" class="value" value="300">300</label>　
    <label>
      <input type="checkbox" class="value aaa" value="100">multiple pages:100×
      <input value="" type="text" class="pages">pages
    </label>
    [Subtotal]<input type="text" class="xxx" value="0">
  </div>
  <div class="category">
    [Group-B]
    <label><input type="radio" class="value" value="100">100</label>　
    <label><input type="radio" class="value" value="200">200</label>　
    <label><input type="radio" class="value" value="300">300</label>　
    <label>
      <input type="checkbox" class=" aaa" value="200">multiple pages:200×
      <input value="" type="text" class="pages">pages
    </label>
    [Subtotal]<input type="text" class="xxx" value="0">
  </div>

  Total:<input type="text" class="zzz" value="0">
</form>

JS

$(function() {
  $('.category').each(function() {
    var category = this;

    //選択項目
    $('input[class="value"]', this).change(function() {
      var fee = [];
      $('input[class="value"]:checked' , category).each(function() {
        var num = parseInt($(this).val());
        fee.push(num);
      });
      var subtotal = 0;
      for (var i = 0; i < fee.length; i++) {
        subtotal += fee[i];
      }
      
      $('input[class="aaa"]:checked' , category).each(function() {
        //入力値
        var aaa = parseInt($(this).val());
        $('.pages', category).on('change', function() {
          var str = $(this).val();
          var pageNum = Number(str.replace(/[^0-9]/g, '')); 
          if(pageNum == 0) {
            pageNum = '';
          }
          $(this).val(pageNum);

          var ccc = [];
          if(pageNum != 0) {
            var price = pageNum * aaa;
            ccc.push(price);
          }
          var subtotal = 0;
          for (var i = 0; i < ccc.length; i++) {
            subtotal += ccc[i];
          }
        });

      });

      $('.xxx', category).val(subtotal);
      var array = [];
      $('.xxx').each(function() {
        var num = parseInt($(this).val());
        array.push(num);
      });
      var total = 0;
      for (var i = 0; i < array.length; i++) {
        total += array[i];
      }
      $('input[class="zzz"]').val(total);
    });
  });
});

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

回答2件

ベストアンサー

javascript
1<script>
2$(function(){
3  $('.category input').on('change',function(){
4    var selector=$(this).closest('.category').find('input');
5    var m=selector.filter('.value:checked').map(function(){
6      return parseInt($(this).val());
7    }).get();
8    if(selector.filter('.multi').is(':checked')){
9      var v=parseInt(selector.filter('.multi').val())*parseInt(selector.filter('.multi').next('.pages').val()||"0");
10      m.push(v);
11    }
12    selector.filter('.subtotal').val(m.reduce(function(x,y){
13      return x+y;
14    }));
15    $('.total').val($('.subtotal').map(function(){
16      return parseInt($(this).val());
17    }).get().reduce(function(x,y){
18      return x+y;
19    }));
20  });
21});
22</script>
23<form action="">
24  <div class="category">
25    [Group-A]
26    <label><input type="checkbox" class="value" value="100">100</label>　
27    <label><input type="checkbox" class="value" value="200">200</label>　
28    <label><input type="checkbox" class="value" value="300">300</label>　
29    <label>
30      <input type="checkbox" class="multi" value="100">multiple pages:100×
31      <input value="" type="text" class="pages">pages
32    </label>
33    [Subtotal]<input type="text" class="subtotal" value="0" readonly>
34  </div>
35  <div class="category">
36    [Group-B]
37    <label><input type="radio" name="grpB" class="value" value="100">100</label>　
38    <label><input type="radio" name="grpB" class="value" value="200">200</label>　
39    <label><input type="radio" name="grpB" class="value" value="300">300</label>　
40    <label>
41      <input type="checkbox" class="multi" value="200">multiple pages:200×
42      <input value="" type="text" class="pages">pages
43    </label>
44    [Subtotal]<input type="text" class="subtotal" value="0">
45  </div>
46  Total:<input type="text" class="total" value="0">
47</form>