Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.08.2022, 11:33
Аспирант
Отправить личное сообщение для vasoli Посмотреть профиль Найти все сообщения от vasoli
 
Регистрация: 03.08.2022
Сообщений: 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>
Ответить с цитированием
  #2 (permalink)  
Старый 05.08.2022, 12:31
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,914

Сообщение от vasoli
как суммировать и динамически вывести значение сгенерированных input
Использовать делегирование событий...
https://codernote.ru/jquery/sobytiya-jquery/on/
Ответить с цитированием
  #3 (permalink)  
Старый 05.08.2022, 12:37
Аспирант
Отправить личное сообщение для vasoli Посмотреть профиль Найти все сообщения от vasoli
 
Регистрация: 03.08.2022
Сообщений: 33

а можно конкретно на указанном примере? гуглить все умеем, но когда не разбираемся пишем тут.
Ответить с цитированием
  #4 (permalink)  
Старый 05.08.2022, 12:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,274

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>
Ответить с цитированием
  #5 (permalink)  
Старый 05.08.2022, 13:12
Аспирант
Отправить личное сообщение для vasoli Посмотреть профиль Найти все сообщения от vasoli
 
Регистрация: 03.08.2022
Сообщений: 33

Спасибо.
Ответить с цитированием
  #6 (permalink)  
Старый 05.08.2022, 16:42
Аспирант
Отправить личное сообщение для vasoli Посмотреть профиль Найти все сообщения от vasoli
 
Регистрация: 03.08.2022
Сообщений: 33

если пока отметил один чекбокс и ввел значение а после отметил другой, занчение в первом обнуляется. Можно это исправить?
Ответить с цитированием
  #7 (permalink)  
Старый 05.08.2022, 17:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,274

vasoli,
можно, но это задача для вашего развития, нужно придумать алгоритм, что-то нужно изменить в строке 14. попробуйте описать это словами. алгоритмов может быть много, ваша задача как программиста, мыслить алгоритмами, а потом по алгоритму писать код. ход за вами.
Ответить с цитированием
  #8 (permalink)  
Старый 05.08.2022, 17:49
Аспирант
Отправить личное сообщение для vasoli Посмотреть профиль Найти все сообщения от vasoli
 
Регистрация: 03.08.2022
Сообщений: 33

$('input:checkbox:checked').each(function() {
в этой?
Ответить с цитированием
  #9 (permalink)  
Старый 05.08.2022, 18:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,274

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>
Ответить с цитированием
  #10 (permalink)  
Старый 05.08.2022, 18:08
Аспирант
Отправить личное сообщение для vasoli Посмотреть профиль Найти все сообщения от vasoli
 
Регистрация: 03.08.2022
Сообщений: 33

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


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вывод typeof input на страницу mstego Элементы интерфейса 2 16.02.2022 07:21
Вывод из div в input value динамически? dwib Общие вопросы Javascript 1 29.10.2017 18:42
вывод картинки при вводе в input определенного слова kennycorm Элементы интерфейса 3 10.08.2016 09:55
Суммирование элементов и вывод результата Adverterio Элементы интерфейса 3 26.11.2015 15:36
При добавлении DOCTYPE "плывут" размеры input type=text Demath (X)HTML/CSS 4 08.07.2012 18:27