07.02.2016, 01:12
|
Новичок на форуме
|
|
Регистрация: 07.02.2016
Сообщений: 5
|
|
Посчитать значения чекбоксов
И так вопрос, как реализовать такой подсчет значений чекбоксов:
Например есть 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>
Спасибо за помощь
|
|
07.02.2016, 01:36
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
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>
|
|
07.02.2016, 01:52
|
|
Профессор
|
|
Регистрация: 15.07.2015
Сообщений: 511
|
|
рони, а что бысрее будет.
this.children + filter + reduce
querySelectorAll + reduce
По сути 2 цикла vs выборка N элементов и цикл. ??
|
|
07.02.2016, 02:00
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
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>
|
|
07.02.2016, 02:01
|
Новичок на форуме
|
|
Регистрация: 07.02.2016
Сообщений: 5
|
|
Еще вопрос, если данную функцию усложнить, тоесть 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>
|
|
07.02.2016, 02:07
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
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>
|
|
07.02.2016, 11:12
|
Новичок на форуме
|
|
Регистрация: 07.02.2016
Сообщений: 5
|
|
Спасибо, то что нужно.
еще подскажите как полученную сумму вставить в скрытый инпут
<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="">
Спасибо
|
|
07.02.2016, 11:31
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
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>
|
|
07.02.2016, 23:26
|
Новичок на форуме
|
|
Регистрация: 07.02.2016
Сообщений: 3
|
|
Помогите, уже долго не получается разобраться, на сайте имею подобного рода скрипт, но результат выводится в текстовую область с параметрами readonly="readonly" type="text", выглядит не эстетично, а как вывести просто на страницу (как здесь "Total: 20")?
|
|
07.02.2016, 23:30
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
Arteist,
что нибудь про innerHTML слышали?
|
|
|
|