Вход

Просмотр полной версии : Прибавить и отбавить чекбокс

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
: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.php5/%D0%A2%D0%BE%D0%BB%D1%8C%D0%BA%D0%BE_%D1%84%D0%BB% D0%B0%D0%B6%D0%BA%D0%B8
Alex_63
30.03.2016, 19:19
Dilettante_Pro, СПС, поправил