На веб-странице необходимо отслеживать состояние элементов checkbox.

Опубликовал: admin Saturday, June 22, 2024 в категории jQuery, Подборка рецептов | Пока нет комментариев

Решение

Для решения задачи используем фильтр :checked (листинг 1.8.2).

Листинг1 .8 .2 . Использование фильтра :checked

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-1-8-2</title>
<content>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css"> form { width:100px; }
input { float:right; margin-bottom:2px; } br { clear:right; }
</style>
<script type="text/javascript">
$(function(){
function countChecked() {
var n = $("input:checked").length;
$("div").text("Отмечено — "
+ n);
}
countChecked();
$(":checkbox").click(countChecked);
});
</script>
</head>
<body>
<form>
<hr />
<input type="checkbox" /><label>Секунда</label><br />
<input type="checkbox" /><label>Минута</label><br />
<input type="checkbox" /><label>Час</label><br />
<input type="checkbox" /><label>День</label><br />
<input type="checkbox" /><label>Неделя</label><br />
<input type="checkbox" checked="checked" /><label>Месяц</label><br />
<input type="checkbox" checked="checked" /><label>Год</label><br />
</form>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>example-1-8-2</title>

input { float:right; margin-bottom:2px; } br { clear:right; }

</style>

$(function(){

function countChecked() {

var n = $("input:checked").length;

$("div").text("Отмечено — "

+ n);

}

countChecked();

$(":checkbox").click(countChecked);

});

</script>

</head>

<body>

<form>

<hr />

<input type="checkbox" /><label>Секунда</label><br />

<input type="checkbox" /><label>Минута</label><br />

<input type="checkbox" /><label>Неделя</label><br />

<input type="checkbox" checked="checked" /><label>Месяц</label><br />

</form>

</body>

</html>

Обсуждение

Сначала разберем HTML-разметку из листинга 1.8.2. Форма содержит семь элементов checkbox, два из которых отмечены по умолчанию. Есть элемент div — сюда мы будем вставлять сообщения о количестве отмеченных элементов каждый раз, когда в форме произойдет какое-либо изменение.

Теперь обратим внимание на JavaScript-код. Сначала мы определили простую функцию для подсчета отмеченных элементов checkbox. В первой строке кода функции мы отыскиваем все отмеченные элементы checkbox, подсчитываем их число с помощью метода length() и запоминаем в переменной n. Во второй строке находим элемент div и вставляем в него текст, где присутствует и переменная n — число отмеченных checkbox. Осталось только вызвать эту функцию при загрузке страницы и, конечно, вызывать каждый раз при наступлении события click на каком-либо из элементов checkbox.

Источник: Самков Г. А. jQuery. Сборник рецептов. — 2-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2011. — 416 с.: ил. + CD-ROM — (Профессиональное программирование)

Популярное

Категории

На веб-странице необходимо отслеживать состояние элементов checkbox.

Решение

Обсуждение

Похожие посты:

Комментировать Cancel reply