Динамическое сумирование checkbox и number

Question

Не получается суммирование вводимого значения в поле type="number".

$(function () {
   let checkboxs = $('.sum_value input:checkbox');
   checkboxs.change(function () {
      $('#options_value_1').html('');
      if (this.checked) {
         //let text = $('#text').val();
         let input = $(`<input class="number" type="number" value="${this.value}" />`);
         $(this).data('input', input);
      } else $(this).removeData('input');
      checkboxs.each(function (i, checkbox) {
         if ($(checkbox).data('input')) $('#options_value_1').append([$(checkbox).data('input'), checkbox.value, '<br>']);
      })
      $('#options_value_1').trigger('input');
   });
   $('#options_value_1').on('input', function () {
      let sum = $('[type="number"]', this).get().reduce((sum, {
         valueAsNumber
      }) => sum + valueAsNumber, 0)
   $('.options_sum_1 span').text(sum);

   })
});


// $('#text').val();
// $('.options_sum_1 span').text(sum);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="js_script.js" defer></script>
</head>

<body>
  <div class="wrapper">
    <form action="segment_num.php" method="POST">
      <div class="center _container">
        <ul class="accordion _container" id="accordion">
          <li>
            <ul>
              <li>
                <div class="sum_value">
                  <div class="table_td" id="male">
                    <input type="checkbox" name="ntest" value="0">
                    <input type="number" name="ramdeni" placeholder="65900" /> test_1
                    <p id="result">0</p>
                  </div>

                  

                  <div class="table_td" id="male">
                    <input type="checkbox" name="ntest" value="0">
                    <input type="number" name="ramdeni" id="text" placeholder="65900" /> test_2
                    <p id="result">0</p>
                  </div>

                  <div class="table_td" id="male">
                    <input type="checkbox" name="ntest" value="0">
                    <input type="number" name="ramdeni" placeholder="65900" /> test_3
                    <p id="result">0</p>
                  </div>

                </div>
              </li>
              
            </ul>
          </li>
          
        </ul>
      </div>

      <div class="column_3" id="column_3">
        <br>
        <div class="res1">
          <div class="options_sum_1" id="options_sum_1">
            test: <span></span>
          </div>
          <div class="options_value_1" id="options_value_1">
            <p id="options_value_1" class="options_value_1"></p>
          </div>
        </div>
       
        <button id="button2" class="button2"> but </button>
      </div>
    </form>

  </div>

</body>

</html>

БЛОГ НА HUSL

Динамическое сумирование checkbox и number

Ответы (0 шт):