Подсчёт количества выбранных чекбоксов на jQuery

Подсчёт количества отмеченных элементов ‘checkbox’ на странице и вывод результата — задача вполне простая. Имея под рукой подключенную библиотеку jQuery и любую форму, можно справиться за несколько минут.

Для начала, создаём форму с чекбоксами (флажками):

<form name="MainForm" method="post" action="script.php">
<input type="checkbox" name="checkbox1" value="1">
Вариант первый
<input type="checkbox" name="checkbox2" value="1">
Вариант второй
<input type="checkbox" name="checkbox3" value="1" checked>
Вариант третий (по умолчанию)
</form>

Нужно вывести результат на экран? Тогда в произвольном месте дописываем контейнер:

<div id="showGoods" hidden="true"><b>Отмечено флажков: <span style="color:green;" id="goodsLenght"></span></b></div>

По умолчанию, контейнер до начала работы скрипта не отображается. Если вам нужно видеть контейнер на странице сразу, атрибут hidden=’true’ убираем. Далее скрипт:

<script type="text/javascript">
    $("#MainForm").click(function () {
var chk = $('#MainForm').find('input[type=checkbox]:checked').length
$("#showGoods").fadeIn("slow");
$("#goodsLenght").text(chk);
    });
  </script>

Если hidden=’true’ убрали, тогда четвёртую строку также убираем.

Теперь, при клике по форме ‘MainForm’, появляется наш контейнер, в котором отображается количество отмеченных флажков. Само собой, значение будет меняться при кликах по самим флажкам.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

два × 3 =