Посчитать значения чекбоксов
И так вопрос, как реализовать такой подсчет значений чекбоксов:
Например есть 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, время: 15:23. |