Чтобы добавить значение выбранного чекбокса к сумме, вам понадобится использовать JavaScript для обработки события изменения состояния чекбокса и изменения значения суммы.
Вот как это можно сделать:
1. Добавьте HTML-элементы на вашу страницу, включая чекбоксы для выбора и место для отображения суммы. Например:
<input type="checkbox" id="checkbox1" value="10"> Checkbox 1 <input type="checkbox" id="checkbox2" value="20"> Checkbox 2 <input type="checkbox" id="checkbox3" value="30"> Checkbox 3 <p>Total: <span id="total">0</span></p>
2. Напишите JavaScript-скрипт, который будет обрабатывать изменение состояния чекбоксов и обновлять значение суммы. Можно использовать обработчик событий "change" и метод getElementById для получения значений и элемента суммы. Например:
const checkboxes = document.querySelectorAll('input[type="checkbox"]'); const totalElement = document.getElementById('total'); // добавляем обработчик события "change" для каждого чекбокса checkboxes.forEach(function(checkbox) { checkbox.addEventListener('change', function() { let total = 0; checkboxes.forEach(function(checkbox) { if (checkbox.checked) { total += parseInt(checkbox.value); } }); // обновляем значение суммы totalElement.textContent = total; }); });
В этом коде мы используем метод querySelectorAll для выбора всех чекбоксов на странице, а затем добавляем обработчик события "change" для каждого чекбокса. Внутри обработчика мы перебираем все чекбоксы и суммируем значения выбранных чекбоксов, обновляя значение суммы (элемент с идентификатором "total").
3. Добавьте этот JavaScript-код на вашу страницу, обычно в теге <script> перед закрывающим тегом </body>.
Теперь, когда пользователь выбирает или отменяет выбор чекбокса, сумма будет автоматически обновляться.
Это пример достаточно простой реализации, но вы можете добавлять и изменять код, чтобы адаптировать его под свои нужды. Например, вы можете использовать другие способы выборки чекбоксов, добавить проверку на максимальное количество выбранных чекбоксов или изменить способ отображения суммы на странице.