Математические операции между значениями chekbox и значениями текстового поля

@lunoglotatel · Регистрация: 12.02.2019

Студворк — интернет-сервис помощи студентам

Есть код

HTML5
1
2
3
4
5
6
7
8
9
10
<p>Total price:<input type="text" id="total" "text" size="3" maxlength="9">
 
 
<div class="tools">
    <p><img class="img-fluid" src ="'"></p>                 
    <p><input type="checkbox" id="answer class="my-checkbox"></p>
    <p><span class="cost"></span></p>       
    <p>Amount:</p>  
     <p><input type = "text" id="amcake" name="pankakedonuts" size="3" maxlength="2" value="00"></p>                         
</div>

Необходимо делать математические операции с отмеченными флажками chekbox .my-checkbox и #amcake c выводом результата в текстовое поля #total.
Т.е. отмеченный чекбокс умножает свое значение (константа) на переменную из текстового поля, и выдает произведение в текстовое поле #total.
Есть скрипт

JavaScript
1
2
3
4
5
6
7
8
9
10
11
jQuery(function($) {
   var $text =$('#total');
   var $box = $('.my-checkbox').on('click', function() {
   var values = [$("#iw-modal60 #tools_"+$(this).attr("id").substr(-1)).find('.cost').text()];
  
$box.filter(':checked').each(function() {  
 $text.val(values); 
    });
    
  });
});

Скрипт выводит в текстовое поле свое значение из класса .cost но не снимает его при убранном флажке.

@amr-now · 19.02.2019, 15:41

Привет!
Мутная разметка html. Мутная постановка задачи. Так задачи не описываются.
Вот что удалось понять:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <p>Total price:<input type="text" id="total" size="3" maxlength="9" readonly><!-- была ошибка: лишнее "text"-->
    </p> <!-- не было закрывающего тега -->
 
    <div class="tools">
        <p><img class="img-fluid" src="'"></p>
        <p><input type="checkbox" id="answer" class="my-checkbox"></p><!-- была ошибка в атрибутах-->
        <p><span class="cost">100</span></p>
        <p>Amount:</p>
        <p><input type="text" id="amcake" name="pankakedonuts" size="3" maxlength="2" value="00"></p>
    </div>
    <script>
        $(function () {
            var text = $("#total"),
                box = $(".my-checkbox"),
                cost = $(".cost"),
                amcake = $("#amcake");
            box.on("change", checkboxHandler);
 
            function checkboxHandler(e) {
                text.val(this.checked ? (cost.text() * amcake.val()).toFixed(2) : "");
            }
        });
    </script>
</body>
</html>

@lunoglotatel · 19.02.2019, 16:04 **[ТС]**

Прошу прощения. С куском php может быть будет понятнее.
Задача: получить общую цифру в текстовом поле input. Общую цифру получаю из отмеченных чекбоксов путем умножения id="pankakedonuts" и значения из класса "cost". Значения класса cost беру из базы.

Грубо говоря, есть наименования продуктов, которые я беру с базы данных, цены на продукты беру с базы данных( класс cost) так же. Чекбоксы получаю индивидуально к каждому элементу массива продуктов.
Количество продуктов вводится пользователем через поле инпута id="pankakedonuts".
Таким образом пользователь выбирает чекбоксы, чекбоксы имеют значения, так же пользователь вводит количество. Итоговая цифра должна получиться путем перемножения всего этого.
На данный момент я вывел значения чекбоксов в текстовое поле.

Повторяющийся фрагмент

HTML5
1
2
3
4
5
6
7
8
9
<div class="tools" id="tools_<?=$row['b_id']?>">    
    <p><?php echo '<img class="img-fluid" src ="img/picbludo/'.$row['picture'].'">'; ?></p>                 
    <p><input type="checkbox" id="answer_<?=$row['b_id']?>" class="my-checkbox" value="1"></p>
    <p> Price for 1:</p>
    <p><span class="cost"><?=$row['po_on'];?></span></p>        
    <p>Amount:</p>                          
    <p><input type = "text" id="pankakedonuts" name="pankakedonuts" class="am-input" size="3" maxlength="2" value="00"></p>                         
    <p><a href="#iw-modal80"class=" primary-btn2 header-btn text-uppercase"><?=$row['b_name']?></a></p>
  </div>

Скрипт

JavaScript
1
2
3
4
5
6
7
8
9
10
11
jQuery(function($) {
   var $text =$('#total');
   var $box = $('.my-checkbox').on('click', function() {
   var values = [$("#iw-modal60 #tools_"+$(this).attr("id").substr(-1)).find('.cost').text()];
  
$box.filter(':checked').each(function() {  
 $text.val(values); 
    });
    
  });
});

@lunoglotatel · 20.02.2019, 13:04 **[ТС]**

Спасибо - немного сдвинулся с места. Стал адаптировать под себя. Вначале предложенный скрипт складывал строки. И считал поле инпута как одно - т.е. надо было ввсести значения во все инпуты, что бы получить сложение строк.
Но инпуты у меня формируются динамически, после вывода данных из БД.
Я связал текстовое поле инпутов с id таблицы базы данных, в итоге стал получать NaN.

PHP
1
2
<p>Amount:</p>                          
    <p><input type = "text"[B] id="amcake_<?=$row['b_id']?>"[/B] class="my-amcake" name="pankakedonuts" size="3" maxlength="2" value="00"></p>

Добавлено через 3 часа 53 минуты
Сформулировал задачу.

Когда установлен флажок на чекбоксе вычисляет сумму значений всех отмеченных чекбоксов.

Когда начинаем вводить число в инпут вычисляется сумма всех чисел инпутах, выделенных чекбоксов.

Происходит подсчет произведения значения чекбокса (сумма всех чекбоксов) и значения инпута(сумма всех значений инпута). Вывод на экран.

Значения чекбоксы берут из БД. Значения инпута вводится в ручную.

Как можно это реализовать?

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&d=1772460536 Одним из. . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .
SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .