Калькулятор с радиокнопками Срочно
Добрый вечер, дорогие форумчане!
Пытался написать простейший калькулятор с радиокнопками, но заплутал и ищу помощи) Раньше были чекбоксы, заменил их на радиокнопки, смог добиться чтобы можно было выбрать сразу обе кнопки - сумму считает. Но при снятии флажка ни в какую не хочет убавлять сумму назад. Делюсь ссылкой на код в JSFiddle, очень надеюсь на вашу помощь) |
AaronWolfsberg,
всем кнопкам присвоить один класс,цену перенести в value , добавить форму, и по change формы выбирать все класс:checked и в цикле формировать сумму всех выбранных кнопок. |
Не до конца понимаю насчет формы и "по change формы":no: :blink:
|
Цитата:
|
Цитата:
|
По сути всё, что мне нужно - чтобы "калькулятор" при нажатии на левую радиокнопку выдавал число 170, на правую 680. В случае если обе радиокнопки активны - складывал сумму. Ну и при отключении копки "откатывал" к прошлому числу.
|
Нет, нет мне необходимо чтобы внешний вид оставался именно таким
|
Я извиняюсь, радиокнопки чтобы выбирать сразу две кнопки???
Зачем тогда радиокнопки? Почему не чекбоксами? |
В данный момент код Java предназначен для вычисления данных из чекбоксов, что нужно поменять чтобы он считал данные из радиокнопок?
Надеюсь смог кк-то объяснить вот код var Calculator = { selectedGroups: [], sum: 0, isGroupSelected: function(groupId) { return this.selectedGroups.indexOf(groupId) != -1; }, addSelected: function(groupId, amount) { if (!this.isGroupSelected(groupId)) { this.changeSum(amount); } this.selectedGroups.push(groupId); }, removeSelected: function(groupId, amount) { if (!this.isGroupSelected(groupId)) { return; } var groupIndex = this.selectedGroups.indexOf(groupId); this.selectedGroups.splice(groupIndex, 1); if (!this.isGroupSelected(groupId)) { this.changeSum(-amount); } }, onSelect: function(groupId, amount, elem) { if (elem.checked) { this.addSelected(groupId, amount); } else { this.removeSelected(groupId, amount); } }, changeSum: function(amount) { this.sum += amount; this.showSum(); }, showSum: function() { document.getElementById ('r').innerHTML = this.sum; } } |
Цитата:
|
Вот так выглядит HTML часть
<div> <label>250г <input type="radio" onclick="Calculator.onSelect(1, 170, this);clickRadio(this)" name="radio" value="170" /></label> <label>1000г <input type="radio" onclick="Calculator.onSelect(2, 680, this);clickRadio(this)" name="radio" value="680" /> </label> <div class="formInputBlock"> <br /> <b> <span id="r" name="sum">0</span> грн. <div> |
У вас в html полно ошибок.
А радиокнопки - это переключатель, где можно выбрать один вариант. В этом их предназначение. Только один. |
сумма checkbox
AaronWolfsberg,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> <script> addEventListener( "DOMContentLoaded" , function() { function showTotal() { var total = Array.prototype.reduce.call(document.querySelectorAll(".sum:checked"), function(sum, elem) { return sum + +elem.value }, 0); document.querySelector("output").innerHTML = total.toFixed(2) } function clickRadio(event) { //зачем radio работать как checkbox, одному вам известно var target = event.target; if(target.closest(".sum[type='radio']")) { var check = target.classList.contains("check"); target.classList.toggle("check"); target.checked = !check; showTotal(); } } document.querySelector("form").addEventListener("change", showTotal) document.querySelector("form").addEventListener("click", clickRadio) }); </script> </head> <body> <form action="http://"> <label><input name="" type="radio" class="sum" value="2.5">спички 100шт.</label> <label><input name="" type="radio" class="sum" value="100">гречка 1кг</label> <label><input name="" type="checkbox" class="sum" value="333">сахар 1кг</label> </form> <output></output> </body> </html> |
Возможно ли это реализовать? Или как-то "закруглить" чекбоксы?)
|
Спасибо большое))
|
Цитата:
|
Цитата:
|
Цитата:
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .sum + span{ background-color: #D3D3D3; border-radius: 50%; width: 30px; height: 30px; display: inline-block; border: 4px solid #8B4513; } .sum:checked + span { background-color: #006400; } .sum{ display: none; } </style> <script> addEventListener( "DOMContentLoaded" , function() { function showTotal() { var total = Array.prototype.reduce.call(document.querySelectorAll(".sum:checked"), function(sum, elem) { return sum + +elem.value }, 0); document.querySelector("output").innerHTML = total.toFixed(2) } document.querySelector("form").addEventListener("change", showTotal) }); </script> </head> <body> <form action="http://"> <label><input name="" type="checkbox" class="sum" value="2.5"><span class="checkmark"></span>спички 100шт.</label> <label><input name="" type="checkbox" class="sum" value="100"><span class="checkmark"></span>гречка 1кг</label> <label><input name="" type="checkbox" class="sum" value="333"><span class="checkmark"></span>сахар 1кг</label> </form> <output></output> </body> </html> |
Вот ещё такое решение:
<div> <input type="checkbox" name="price" value="170"/> <label>250г</label> </div> <div> <input type="checkbox" name="price" value="680"/> <label>1000г</label> </div> <div> <input type="checkbox" name="price" value="680"/> <label>1000г</label> </div> <div> <input type="checkbox" name="price" value="680" /> <label>1000г</label> </div> <hr> <div> <span id="result">0</span> грн. </div> <script> let result = document.querySelector('#result'); function sum() { let checks = document.querySelectorAll('input[name="price"]:checked'); let prices = []; let summa; if (checks.length > 0) { checks.forEach(el => prices.push(+el.value)); summa = prices.reduce((acc, element) => acc + element); } else summa = 0; result.textContent = summa; } document.querySelectorAll('input[name="price"]').forEach(el => el.addEventListener('input', sum)); </script> |
Часовой пояс GMT +3, время: 17:45. |