Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.02.2016, 01:12
Новичок на форуме
Отправить личное сообщение для sergylt Посмотреть профиль Найти все сообщения от sergylt
 
Регистрация: 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>


Спасибо за помощь
Ответить с цитированием
  #2 (permalink)  
Старый 07.02.2016, 01:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,067

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>
Ответить с цитированием
  #3 (permalink)  
Старый 07.02.2016, 01:52
Аватар для Lemme
Профессор
Отправить личное сообщение для Lemme Посмотреть профиль Найти все сообщения от Lemme
 
Регистрация: 15.07.2015
Сообщений: 511

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

this.children + filter + reduce


querySelectorAll + reduce


По сути 2 цикла vs выборка N элементов и цикл. ??
Ответить с цитированием
  #4 (permalink)  
Старый 07.02.2016, 02:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,067

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>
Ответить с цитированием
  #5 (permalink)  
Старый 07.02.2016, 02:01
Новичок на форуме
Отправить личное сообщение для sergylt Посмотреть профиль Найти все сообщения от sergylt
 
Регистрация: 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>
Ответить с цитированием
  #6 (permalink)  
Старый 07.02.2016, 02:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,067

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>
Ответить с цитированием
  #7 (permalink)  
Старый 07.02.2016, 11:12
Новичок на форуме
Отправить личное сообщение для sergylt Посмотреть профиль Найти все сообщения от sergylt
 
Регистрация: 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="">
Спасибо
Ответить с цитированием
  #8 (permalink)  
Старый 07.02.2016, 11:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,067

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>
Ответить с цитированием
  #9 (permalink)  
Старый 07.02.2016, 23:26
Новичок на форуме
Отправить личное сообщение для Arteist Посмотреть профиль Найти все сообщения от Arteist
 
Регистрация: 07.02.2016
Сообщений: 3

Помогите, уже долго не получается разобраться, на сайте имею подобного рода скрипт, но результат выводится в текстовую область с параметрами readonly="readonly" type="text", выглядит не эстетично, а как вывести просто на страницу (как здесь "Total: 20")?
Ответить с цитированием
  #10 (permalink)  
Старый 07.02.2016, 23:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,067

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Передача нового значения value в select tvixa Элементы интерфейса 5 08.09.2015 15:41
Множественные значения в input - ЗА ВОЗНАГРАЖДЕНИЕ! Pb160 Events/DOM/Window 0 03.08.2015 12:29
Передать значения чекбоксов аяксом Kane jQuery 1 04.01.2014 23:47
получение значения из классов karmis Events/DOM/Window 1 14.10.2011 19:09
Помогите вывести и посчитать значения ячеек в таблицах uznik73 Events/DOM/Window 13 14.07.2011 13:09