1 / 1 / 0
Регистрация: 02.05.2010
Сообщений: 13

Счетчик по многократному нажатию checkbox'a

30.05.2013, 03:59. Показов 1835. Ответов 5
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Доброго времени суток! Стоит задача из списка(checkbox'ов) ингредиентов, создавать рандомный "суп".
HTML5
1
2
3
4
5
6
7
8
9
10
11
 <div class="description">
 <div class="composition">Выбери ингридиент</div>
   ...
   <li>
    <input type="checkbox" name="product_option_id" value="product_option_value_id" id="option-value-*" />
    <input type="text" name="quant-option-product_option_id" value="0" id="quant-option-value-*" />
    <label class="name-wokk" for="option-value-*">name</label>
    <label style="display: none;" for="tvoritelnuy-option-value-*">name_tv</label>
   </li>
   ... and etc...
 </div>
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<script type="text/javascript">
$(document).ready(function() {
   $(".description").live("change",function() { //мониторим весь блок с чекбоксами/радиобатоннами
   
        var totalSum = '';   //Эту строку будем выводить что у нас выходит на текущий момент.     
      
      //Возьму пример только с чекбоксами                                  
        $("input[type=checkbox]:checked").each(function() { //Мониторим нажатие на чекбокс
       //Да, я знаю это идиотизм)
                                          if (totalSum ==  '') { //Если пустая начинаем
                                            totalSum += 'Собери свой суп<a id="'+ $(this).attr('id')
+'">'+$("label[for='tvoritelnuy-"+$(this).attr('id')+"']").html()+'</a>';      
/*
Что происходит: Жмем чекбокс -> заносится в творительном падеже (хотя это не важно) в строку название ингредиента. (Тобишь в чекбоксе "Свинина" в строку заводится "со свининой") ну и приписываем линку id что же точно там нажимали, номер нажатой опции.
*/                                      
                                          } else { //Иначе добавляем с запятой ингридиент  
                                           totalSum +=  '<a id="'+ $(this).attr('id') +'">, '
                                            + $("label[for='tvoritelnuy-"+$(this).attr('id')+"']").html()
                                            +'</a>';
                                          }           
                                          if (this.checked) { $(this).attr('disabled', true); //После первого нажатия, я просто отключаю чекбокс и мониторю клики по рядом лежащему label'у, записываю количество нажатий в еще один рядом лежащий инпут в value... Это нужно чтобы писать что-то типа "со свининой (2)" Но вот в этом у меня и загвоздка пошла :) ибо алгоритм такой не подходит
 }
                                        });//each end
                                        
      $(".composition").html(totalSum); //Выводим строку
       
      $(".composition a").click(function () { //ПО клику на ингридиент
         var titla = $(this).attr('id');
          $(this).remove(); //Удаляем его
          $("input[id="+titla+"]").removeAttr("checked"); //Вовзращаем чекбокс в исходное(снимаем галку)
          $("input[id="+titla+"]").removeAttr("disabled"); //Вовзращаем чекбокс в исходное(включаем)
          $("input[id=quant-"+titla+"]").val('0'); //проставляем 0, но и это нужно переделать будет ибо если будет подсчет количества х2,х3 то и уменьшать нужно как-то :)
         });
}); //live end
   
   $("label.name-wokk").click(function() { //Вот тут подсчет кликов по label'у
         var quantity = Number($("input[id=quant-"+ $(this).attr('for') +"]").val()); //Делаю числовым
         $("input[id=quant-"+ $(this).attr('for') +"]").val(quantity+1);  //смотрю, что в инпут заносится нормально
   });
                                                 
});
</script>
Вопрос, как это можно написать еще по другому, чтобы загвоздка ушла в небытие Тобишь... создать строку, и по клику на ингридиент один раз = получается успешно.. а вот при повторном нажатии добавлять в строку множитель.. в случае если пользователь перестарался уменьшать количество ингридиента.
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
30.05.2013, 03:59
Ответы с готовыми решениями:

Счётчик по нажатию кнопки
Есть рабочий код который срабатывает только когда нажимаю кнопку сам, а когда по таймеру идёт клик счётчик не работает. // Счётчик для...

Счетчик с прерыванием по нажатию кнопки
Здравствуйте, помогите, пожалуйста, сделать код правильным. МК соединен с индикатором и кнопкой, порядок работы такой: 1. При нажатии...

Счетчик по нажатию должен увеличиваться, но этого не делает.
Пишу &lt;% Dim a(9) for i = 0 to 9 a(i)=i next Sub my() if request.form('bool')='' then j=0 else

5
странник
 Аватар для Donald28
810 / 481 / 108
Регистрация: 28.05.2012
Сообщений: 1,518
Записей в блоге: 2
30.05.2013, 13:58
а как на блоке div.description работает событие onChange?
0
1 / 1 / 0
Регистрация: 02.05.2010
Сообщений: 13
30.05.2013, 14:25  [ТС]
ведь в блоке description находятся чекбоксы/радиобатоны и поля, которые еще используются для подсчета цены, функция .live() как обработчик событий вешает им событие onChange... или может я ошибаюсь?) то что я в jquery топор согласен)
0
странник
 Аватар для Donald28
810 / 481 / 108
Регистрация: 28.05.2012
Сообщений: 1,518
Записей в блоге: 2
30.05.2013, 14:56
а что хоть за загвоздка? в чем проблема то не описано
0
1 / 1 / 0
Регистрация: 02.05.2010
Сообщений: 13
30.05.2013, 15:32  [ТС]
Ну вот, когда кликаешь на чекбокс в отдельную строку заносится какой ингридиент добавлен... Нужно при повторном клике, чтобы добавлялось в строку к ингридиенту х2, х3 и т.д. так как при повторном клике чекбокс обратно снимается, я сделал чтобы при первом клике ставился чекбокс и кидался в disabled, а по клике на его(чекбокса) label уже велся подсчет количества кликов на ингридиент. Загвоздка в том, чтобы в строку добавлять эти x2, x3, и наоборот когда они уже в строке по их(ингридиента) нажатию уменьшать количество. я так понимаю при таком написанном коде это реализовать трудно.
http://savepic.net/3753182m.png
0
странник
 Аватар для Donald28
810 / 481 / 108
Регистрация: 28.05.2012
Сообщений: 1,518
Записей в блоге: 2
30.05.2013, 15:57
насколько я понял. Попробуй НЕ делать подсчет лэйблов.

Объяви глобальную переменную до выполнения скрипта:
JavaScript
1
2
3
<script type="text/javascript">
var count=0;
$(document).ready(function() {
А затем, при обработке change увеличивайте значение этого счетчика: count++;

а при клике по ссылке уменьшайте: count--;

Добавлено через 3 минуты
P.S. append(text) - добавление текста (включая html теги) в конец (внутри) выбранного селелектора
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
30.05.2013, 15:57
Помогаю со студенческими работами здесь

Автоматическое чекание другого checkboxa
Вот код &lt;input id=&quot;id1&quot;&gt;id1 &lt;input id=&quot;id1&quot;&gt;id1 jQuery('#id1').click(function checkf(){ if (jQuery('#id1').prop('checked',true)) ...

Как сделать кнопку с поведением checkboxa?
т.е. чтобы кнопка могла быть в двух состояниях: нажатой и ненажатой. Подозреваю, что просто, но не нашел как.

Не удается передать в запрос значение CheckBoxa
Доброго дня! Долгое время не программировал в Access и вот результат, не получаются простые вещи.:(( А нужно всего лишь передать в...

Создать класс «счетчик», реализующий циклический счетчик, со следующей структурой
Создать класс «счетчик», реализующий циклический счетчик, со следующей структурой: -поле состояния счетчика; -методы для установки и...

Добавление текстбоксов по нажатию клавиши и удаление по нажатию другой кнопки
Всем доброго времени суток. Хотел попросить помощи в написании следующего кода. Кое что набросал, но не работает при удалении...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Опции темы

Новые блоги и статьи
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++
8Observer8 10.03.2026
Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:
Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE
8Observer8 10.03.2026
Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки
Neotwalker 08.03.2026
Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages
DevAlt 07.03.2026
Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F#
DevAlt 06.03.2026
В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .
Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование
8Observer8 05.03.2026
Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D
8Observer8 04.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий
8Observer8 02.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru