0

как суммировать и динамически вывести значение сгенерированных input напротив Sum:?

$(document).ready(function() {
   $('.sum_value input').click(function() {
     $('#options_value2').html('');
     $('input:checkbox:checked').each(function() {
       $('#options_value2').append($(this).val() + (`<input class="number" type="number" value="" max="${this.value}" /><br>`));
     });
   });
 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="grid_css">
    <div class="column_1">
      <ul id="accordion">
        <li>
          <div class="line_All_green">

            <div class="sum_value">

              <div id="1" class="table-td">
                <input type="checkbox" value="11111" id="1_1"><span>A 1</span><noscript>aaa111</noscript>
              </div>
              <div id="2" class="table-td">
                <input type="checkbox" value="22222" id="2_2"><span>B 2</span><noscript>bbb222</noscript>
              </div>
              <div id="3" class="table-td">
                <input type="checkbox" value="33333" id="3_3"><span>C 3</span><noscript>ccc333</noscript>
              </div>

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

    </div>

    <div class="column_3" id="column_3">
      <div class="options_sum" id="options_sum">Sum: <span></span></div>Value:
      <div class="options_value2" id="options_value2">
        <p id="options_value2" class="options_value2"></p>
      </div>
      
      <button id="button2" class="button2" > Copy </button>
    </div>
  </div>

1 ответ 1

0

Можно так например:

  1. Записываем динамические инпуты в переменную, а не сразу аппендим
  2. Вешаем событие
  3. Аппендим
  4. Вставляем в массив инпутов
  5. При страте, после каждого клика, после каждого изменения запускаем обновление суммы, проходимся по массиву инпутов и у каждого берём значение и складываем

const updateSum = (inputs = []) => {
  let sum = 0;

  inputs.forEach(input => sum += Number(input.val()));

  $('#options_sum span').text(sum)
}

$(function() {
  updateSum();

  $('.sum_value input').click(function(e) {
    $('#options_value2').html('');
    
    const inputs = [];

    $('input:checkbox:checked').each(function() {
      const input = $(`<input class="number" type="number" value="1" max="${this.value}" />`)
      
      input.on('input', () => updateSum(inputs));
    
      $('#options_value2').append([this.value, input, '<br>']);
      
      inputs.push(input);
    });
    
     updateSum(inputs);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="grid_css">
  <div class="column_1">
    <ul id="accordion">
      <li>
        <div class="line_All_green">

          <div class="sum_value">

            <div id="1" class="table-td">
              <input type="checkbox" value="11111" id="1_1"><span>A 1</span><noscript>aaa111</noscript>
            </div>
            <div id="2" class="table-td">
              <input type="checkbox" value="22222" id="2_2"><span>B 2</span><noscript>bbb222</noscript>
            </div>
            <div id="3" class="table-td">
              <input type="checkbox" value="33333" id="3_3"><span>C 3</span><noscript>ccc333</noscript>
            </div>

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

  </div>

  <div class="column_3" id="column_3">
    <div class="options_sum" id="options_sum">Sum: <span></span></div>Value:
    <div class="options_value2" id="options_value2">
      <p id="options_value2" class="options_value2"></p>
    </div>

    <button id="button2" class="button2"> Copy </button>
  </div>
</div>

3
  • нужно суммировать вводимые значение в сгенерированых <input class="number" type="number" value="" max="${this.value}" /> полях
    – DuKr8
    Commented 5 авг. 2022 в 9:26
  • @DuKr8 Готово, проверяйте
    – EzioMercer
    Commented 5 авг. 2022 в 9:55
  • 1
    Спасибо. То что нужно.
    – DuKr8
    Commented 5 авг. 2022 в 10:06

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.