Посчитать значения чекбоксов

[sergylt]

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

[Lemme]

рони, а что бысрее будет.

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>

[sergylt]

Еще вопрос, если данную функцию усложнить, тоесть 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>

[sergylt]

Спасибо, то что нужно.
еще подскажите как полученную сумму вставить в скрытый инпут
<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>

[Arteist]

Помогите, уже долго не получается разобраться, на сайте имею подобного рода скрипт, но результат выводится в текстовую область с параметрами readonly="readonly" type="text", выглядит не эстетично, а как вывести просто на страницу (как здесь "Total: 20")?

[рони]

Arteist,
что нибудь про innerHTML слышали?