Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Прибавить и отбавить чекбокс (https://javascript.ru/forum/jquery/62202-pribavit-i-otbavit-chekboks.html)

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

при выборе одного чекбокса на странице к этому числу (5) прибавить (1), так же если отменить чекбокс, то отнять (1), чекбоксов может быть много, поэтому прибавляться может много и отбавляться...

Dilettante_Pro 29.03.2016 17:10 
<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" />

Aleksanderj 30.03.2016 02:59
Спасибо, работает!:)

рони 30.03.2016 08:16
Сумма отмеченных checkbox
 
:write: 
<!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:17
:write: 
<!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>

Alex_63 30.03.2016 18:14
рони,
Чуть сократил скрипт
<!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>

рони 30.03.2016 18:40
Alex_63,
:)

Dilettante_Pro 30.03.2016 18:43
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

Alex_63 30.03.2016 19:19
Dilettante_Pro, СПС, поправил


Часовой пояс GMT +3, время: 22:28.