Посчитать значения чекбоксов
И так вопрос, как реализовать такой подсчет значений чекбоксов:
Например есть 100 чекбоксов у которых значение value=10 Если выбрано от 1 до 5 чекбоксов из этих 100 считаем их value как 10 и получаем 50 тоесть 10+10+10+10+10 получаем 50 Но если выбрано больше 5, например 7 То все что больше 5 Value уже не 10, а 5 10+10+10+10+10 +5+5 =60 сейчас для простого сложения значений использую этот скрипт: <script> var s = document.forms.form, d = s.querySelectorAll('input[type="checkbox"]:not([value]), input[type="checkbox"][value=""]'); for (var i = 0; i < d.length; i++) // чтобы не было написано NaN, убираем в disabled пункты, где не прописаны значения d[i].disabled = true; s.onchange = function() { // начало работы функции сложения var n = s.querySelectorAll('[type="checkbox"]'), itog = 0; for(var j=0; j<n.length; j++) n[j].checked ? itog += parseFloat(n[j].value) : itog; document.getElementById('rezultat').innerHTML = 'Totaal: ' + itog; } </script> Спасибо за помощь :) |
sergylt,
<form name="form" action="http://"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <div class="rezultat"></div> </form> <script> window.addEventListener("DOMContentLoaded", function() { var a = document.querySelector("form"), b = document.querySelector(".rezultat"); a.addEventListener("change", function() { b.innerHTML = "Total: " + [].reduce.call(a.querySelectorAll(":checked"), function(a, b, c) { return a + (5 > c ? 10 : 5) }, 0) }) }); </script> |
рони, а что бысрее будет.
this.children + filter + reduce querySelectorAll + reduce По сути 2 цикла vs выборка N элементов и цикл. ?? |
Lemme,
быстрее будет без циклов <form name="form" action="http://"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <div class="rezultat"></div> </form> <script> window.addEventListener("DOMContentLoaded", function() { var a = document.querySelector("form"), b = document.querySelector(".rezultat"); a.addEventListener("change", function() { var c = a.querySelectorAll(":checked").length b.innerHTML = "Total: " + (c > 5 ? (c - 5)*5 + 50 : c * 10) }) }); </script> |
Еще вопрос, если данную функцию усложнить, тоесть 2 группы с чекбоксами.
с теми же расчетами первая группа 10+10+10+10+10 +5+5 =60 вторая группа 10+10+10+10+10 +5+5 =60 итог = 120 <form name="form" action="http://"> <fieldset class="checkbox_buy1"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> </fieldset> <fieldset class="checkbox_buy1"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> </fieldset> <div class="rezultat"></div> </form> |
sergylt,
<form name="form" action="http://"> <fieldset class="checkbox_buy1"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> </fieldset> <fieldset class="checkbox_buy1"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> </fieldset> <div class="rezultat"></div> </form> <script> window.addEventListener("DOMContentLoaded", function() { var a = document.querySelector("form"), b = document.querySelector(".rezultat"); a.addEventListener("change", function() { b.innerHTML = "Total: " + [].reduce.call(a.querySelectorAll("fieldset"), function(a,b) { var c = b.querySelectorAll(":checked").length; return a + (c > 5 ? (c - 5)*5 + 50 : c * 10) }, 0) }) }); </script> |
Спасибо, то что нужно.
еще подскажите как полученную сумму вставить в скрытый инпут <input id="total" name="total" type="hidden" value=""> и подсчитать например: Выбрано в первом <fieldset> 5 по 10 и 3 по 5 во втором <fieldset> 5 по 10 и 3 по 5 или в первом <fieldset> 3 по 10 во втором <fieldset> 5 по 10 и 3 по 5 и подставить это в value <input id="fieldset1" name="total" type="hidden" value=""> <input id="fieldset2" name="total" type="hidden" value=""> Спасибо |
sergylt,
далее сами, вы уже 3 раза меняли условие задачи <form name="form" action="http://"> <fieldset class="checkbox_buy1"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> </fieldset> <fieldset class="checkbox_buy1"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> <input class="chek" type="checkbox"> </fieldset> <div class="rezultat"></div> <input id="fieldset1" name="total" type="text" value=""> <input id="fieldset2" name="total" type="text" value=""> </form> <script> window.addEventListener("DOMContentLoaded", function() { var a = document.querySelector("form"), b = document.querySelector(".rezultat"), d = a.querySelectorAll("[name='total']"); a.addEventListener("change", function() { b.innerHTML = "Total: " + [].reduce.call(a.querySelectorAll("fieldset"), function(a,b,i) { var c = b.querySelectorAll(":checked").length; d[i].value = (c > 5 ? (c - 5)*5 + 50 : c * 10) return a + +d[i].value }, 0) }) }); </script> |
Помогите, уже долго не получается разобраться, на сайте имею подобного рода скрипт, но результат выводится в текстовую область с параметрами readonly="readonly" type="text", выглядит не эстетично, а как вывести просто на страницу (как здесь "Total: 20")?
|
Arteist,
что нибудь про innerHTML слышали? |
Часовой пояс GMT +3, время: 17:28. |