Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.56/9: Рейтинг темы: голосов - 9, средняя оценка - 4.56
1 / 1 / 0
Регистрация: 02.05.2010
Сообщений: 13

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

30.05.2013, 03:59. Показов 1833. Ответов 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
Ответ Создать тему
Новые блоги и статьи
Модульный подход на примере 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-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .
Реалии
Hrethgir 01.03.2026
Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .
Ритм жизни
kumehtar 27.02.2026
Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .
SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten
8Observer8 27.02.2026
Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами
8Observer8 20.02.2026
Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru