Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.03.2016, 16:24
Аспирант
Отправить личное сообщение для Aleksanderj Посмотреть профиль Найти все сообщения от Aleksanderj
 
Регистрация: 14.06.2013
Сообщений: 70

Прибавить и отбавить чекбокс
Доброго дня всем!
Подскажите как прибавить и отбавить количество активных чекбоксов при клике?
К примеру есть первоначально число, которое может быть разным, в примере
<div id="number">5</div>

при выборе одного чекбокса на странице к этому числу (5) прибавить (1), так же если отменить чекбокс, то отнять (1), чекбоксов может быть много, поэтому прибавляться может много и отбавляться...
Ответить с цитированием
  #2 (permalink)  
Старый 29.03.2016, 17:10
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
    window.onload = function () {

        $('input[type=checkbox]').on('change', function () {
            if($(this).prop("checked")) $("#number").html(parseInt($("#number").html()) + 1);
           else $("#number").html(parseInt($("#number").html()) - 1);    
           
        });
       
    }
</script>

<div id="number">0</div>
<input type="checkbox" value="1" name="option1" />
<input type="checkbox" value="2" name="option2" />
<input type="checkbox" value="3" name="option3" />
<input type="checkbox" value="4" name="option4" />
<input type="checkbox" value="5" name="option5" />
<input type="checkbox" value="6" name="option6" />
Ответить с цитированием
  #3 (permalink)  
Старый 30.03.2016, 02:59
Аспирант
Отправить личное сообщение для Aleksanderj Посмотреть профиль Найти все сообщения от Aleksanderj
 
Регистрация: 14.06.2013
Сообщений: 70

Спасибо, работает!
Ответить с цитированием
  #4 (permalink)  
Старый 30.03.2016, 08:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Сумма отмеченных checkbox

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
   $(function(){
         var d = $("#number"), n = +$("#number").text();
         $('input[type=checkbox]').on('change', function () {
           n += this.checked||-1;
           d.html(n);
        });
   })
  </script>
</head>

<body>
<div id="number">0</div>
<input type="checkbox" value="1" name="option1" />
<input type="checkbox" value="2" name="option2" />
<input type="checkbox" value="3" name="option3" />
<input type="checkbox" value="4" name="option4" />
<input type="checkbox" value="5" name="option5" />
<input type="checkbox" value="6" name="option6" />

</body>

</html>

Последний раз редактировалось рони, 30.03.2016 в 08:19.
Ответить с цитированием
  #5 (permalink)  
Старый 30.03.2016, 08:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126


<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
   $(function(){
         var d = $("#number"), n = +$("#number").text(), c = $('input[type=checkbox]');
         c.on('change', function () {
         d.html(n + c.filter(":checked").length);
        });
   })
  </script>
</head>

<body>
<div id="number">0</div>
<input type="checkbox" value="1" name="option1" />
<input type="checkbox" value="2" name="option2" />
<input type="checkbox" value="3" name="option3" />
<input type="checkbox" value="4" name="option4" />
<input type="checkbox" value="5" name="option5" />
<input type="checkbox" value="6" name="option6" />

</body>

</html>
Ответить с цитированием
  #6 (permalink)  
Старый 30.03.2016, 18:14
Аспирант
Отправить личное сообщение для Alex_63 Посмотреть профиль Найти все сообщения от Alex_63
 
Регистрация: 22.08.2015
Сообщений: 71

рони,
Чуть сократил скрипт
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
   $(function(){
        var d = $('#number'), n = +d.text(), c = $('input:checkbox');
        c.on('change', function () {
          d.html(n + c.filter(':checked').length);
        });
   })
  </script>
</head>

<body>
<div id="number">0</div>
<input type="checkbox" value="1" name="option1" />
<input type="checkbox" value="2" name="option2" />
<input type="checkbox" value="3" name="option3" />
<input type="checkbox" value="4" name="option4" />
<input type="checkbox" value="5" name="option5" />
<input type="checkbox" value="6" name="option6" />

</body>

</html>

Последний раз редактировалось Alex_63, 30.03.2016 в 19:18.
Ответить с цитированием
  #7 (permalink)  
Старый 30.03.2016, 18:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Alex_63,
Ответить с цитированием
  #8 (permalink)  
Старый 30.03.2016, 18:43
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Alex_63,
:checkbox
Соответствует элементам, которые являются флажками (input-элементы с типом checkbox).
Замечание 1: использовать фильтр без предшествующего селектора (то есть $(":checkbox"), вместо $("selector:checkbox")) не рекомендуется, поскольку это эквивалентно $("*:checkbox"), а универсальный селектор "*" работает очень медленно. Лучше будет использовать такую запись: $("input:checkbox").
Замечание 2: "input:checkbox" сработает так же, как и селектор по атрибутам "[type=checkbox]". Однако рекомендуется использовать первый вариант для поиска флажков.
http://jquery.page2page.ru/index.php...B6%D0%BA%D0%B8
Ответить с цитированием
  #9 (permalink)  
Старый 30.03.2016, 19:19
Аспирант
Отправить личное сообщение для Alex_63 Посмотреть профиль Найти все сообщения от Alex_63
 
Регистрация: 22.08.2015
Сообщений: 71

Dilettante_Pro, СПС, поправил
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
ЧекБокс по ссылке, но не работает другой скрипт qwe88 Общие вопросы Javascript 6 11.10.2016 12:00
Показать/скрыть чекбокс и скопировать value из оного input type="text" в другой dpts Элементы интерфейса 1 05.03.2016 08:58
Вставка в поле текст при нажатии на чекбокс Майрбек Элементы интерфейса 5 05.10.2014 15:39
Выделить цветом строку и отметить чекбокс. youscript Javascript под браузер 3 26.08.2014 08:34
Свой чекбокс на скрипте Олег123 Элементы интерфейса 5 06.11.2012 17:19