Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Динамической суммирование и вывод значении input (https://javascript.ru/forum/jquery/84321-dinamicheskojj-summirovanie-i-vyvod-znachenii-input.html)

vasoli 05.08.2022 12:33

Динамической суммирование и вывод значении input
 
как суммировать и динамически вывести значение сгенерированных input
$(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>`));
     });
   });
 });

<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>

ksa 05.08.2022 13:31

Цитата:

Сообщение от vasoli
как суммировать и динамически вывести значение сгенерированных input

Использовать делегирование событий...
https://codernote.ru/jquery/sobytiya-jquery/on/

vasoli 05.08.2022 13:37

а можно конкретно на указанном примере? гуглить все умеем, но когда не разбираемся пишем тут.

рони 05.08.2022 13:47

vasoli,
:(
<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(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="0" max="${this.value}" /><br>`));
                });
                $('.options_sum span').text(0);
            });
            $('#options_value2').on('input', function() {
                let sum = $('[type="number"]', this).get().reduce((sum, {
                    valueAsNumber
                }) => sum + valueAsNumber, 0)
                $('.options_sum span').text(sum);

            })
        });
    </script>
</head>

<body>
    <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>
</body>

</html>

vasoli 05.08.2022 14:12

Спасибо.

vasoli 05.08.2022 17:42

если пока отметил один чекбокс и ввел значение а после отметил другой, занчение в первом обнуляется. Можно это исправить?

рони 05.08.2022 18:21

vasoli,
можно, но это задача для вашего развития, нужно придумать алгоритм, что-то нужно изменить в строке 14. попробуйте описать это словами. алгоритмов может быть много, ваша задача как программиста, мыслить алгоритмами, а потом по алгоритму писать код. ход за вами.

vasoli 05.08.2022 18:49

$('input:checkbox:checked').each(function() {
в этой?

рони 05.08.2022 19:02

vasoli,
медитируйте ...
<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function() {
            let checkboxs = $('.sum_value input:checkbox');
            checkboxs.change(function() {
                $('#options_value2').html('');
                if (this.checked) {
                    let input = $(`<input class="number" type="number" value="0" max="${this.value}" />`);
                    $(this).data('input', input);
                } else $(this).removeData('input');
                checkboxs.each(function(i, checkbox) {
                    if ($(checkbox).data('input')) $('#options_value2').append([checkbox.value, $(checkbox).data('input'), '<br>']);
                })
                $('#options_value2').trigger('input');
            });
            $('#options_value2').on('input', function() {
                let sum = $('[type="number"]', this).get().reduce((sum, {
                    valueAsNumber
                }) => sum + valueAsNumber, 0)
                $('.options_sum span').text(sum);

            })
        });
    </script>
</head>

<body>
    <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>
</body>

</html>

vasoli 05.08.2022 19:08

Спасибо. Такие задачи значит надо решать переменными?

рони 05.08.2022 19:15

Цитата:

Сообщение от vasoli
Такие задачи значит надо решать переменными?

моя твоя не понимай!)))

задача решена созданием цифрового input, который сохраняется на всё время пока this.checked.

до этого была строка, на основе которой каждый раз создавался новый input.

vasoli 06.08.2022 11:19

медитировал и добавил блокировку определенных чекбоксов если отмечен конкретный чекбокс. блокировка работает а ранее сгенерированы инпут не удаляется. где искать решение? в новом коде или в вашем?
const masterCheckbox11111 = document.querySelector('input[type="checkbox"][id="11111"]');
const slaveCheckboxes22222 = document.querySelectorAll('input[type="checkbox"][id*="22222"]');
masterCheckbox11111.addEventListener('change', function () {
   slaveCheckboxes22222.forEach(checkbox => {
      checkbox.checked = false;
      checkbox.disabled = masterCheckbox11111.checked;
   });
});

рони 06.08.2022 12:15

vasoli,
const masterCheckbox11111 = document.querySelector('input[type="checkbox"][id="11111"]');
const slaveCheckboxes22222 = document.querySelectorAll('input[type="checkbox"][id*="22222"]');
masterCheckbox11111.addEventListener('change', function () {
   slaveCheckboxes22222.forEach(checkbox => {
      checkbox.checked = false;
      checkbox.disabled = masterCheckbox11111.checked;
      let input = $(checkbox).data('input');
        if(input)  {
          $(checkbox).removeData('input');
          input.remove();
        }
   });
});

vasoli 06.08.2022 12:24

как всегда спасибо! продолжаю медитацию


Часовой пояс GMT +3, время: 05:14.