ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Проверка активности кнопок и флажков

Проверка активности кнопок и флажков

Хотя функция val() полезна для получения значений любого элемента формы, иногда подобное значение имеет смысл лишь в том случае, если посетитель выбрал какой-то конкретный элемент. Например, переключатели и флажки требуют от посетителя сделать выбор определенного значения. Для поиска отмеченных переключателей или флажков используется фильтр :checked, но как только мы их найдем, нам понадобится способ для определения статуса конкретного переключателя или флажка.

В языке HTML атрибут :checked определяет, помечен ли данный элемент. Например, для установки флажка при загрузке веб-страницы следует добавить атрибут checked следующим образом (для XHTML):

<input type="checkbox" name="news" id="news" checked="checked">

А для НТМL5:

<input type="checkbox" name="news" id="news" checked>

Несмотря на то, что в первом примере - checked="checked" - кажется, что атрибут checked является атрибутом языка HTML, на самом деле он представляет собой свойство DOМ. То есть это свойство элемента "флажок", которое может динамически изменяться, когда посетитель устанавливает и сбрасывает его. Многие другие элементы формы также обладают динамическими свойствами: например, текстовые поля предусматривают свойство disaЬled, определяющее возможность (значение true) или невозможность (значение false) ввода текста в это поле.

В случае со свойствами DOM мы используем мeтoд jQuery prop().

if ($('#news').prop('checked')){ 
// флажок установлен 
} else { 
// флажок сброшен 
} 

Код $ ('#news'). prop('checked') возвращает значение true, если флажок установлен. Если он сброшен, возвращается значение false. Таким образом, данная управляющая инструкция позволяет выполнить один набор задач, если флажок установлен, либо другой набор задач, если флажок сброшен.

Свойство checked применимо и к переключателям. Вы можете использовать функцию prop() таким же образом, чтобы проверить, установлен ли атрибут checked для переключателя.


$(document).ready(function() {
$("#myform").submit(function(e) {
if($("#news").prop("checked")){
alert("Флажок установлен");
}else{
alert("Установите флажок");
}
if($("#his").prop("checked")){
alert("Кнопка включена");
}else{
alert("Включите кнопку");
}
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<style>
.myform{margin:20px 20px}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#myform").submit(function(e) {
if($("#news").prop("checked")){
alert("Флажок установлен");
}else{
alert("Установите флажок");
}
if($("#his").prop("checked")){
alert("Кнопка включена");
}else{
alert("Включите кнопку");
}
});
});
</script>
</head>

<body>
<main class="myform">
<form id="myform">
<label for="news">
<input type="checkbox" name="news" id="news" checked> Подписаться на новости</label><br>
<label for="his"> <input type="radio" name="loc" id="his"> Я использую свой компьютер </label><br />
<label for="overall"> <input type="radio" name="loc" id="overall" checked > Я использую общий компьютер </label><br><br>
<input type="submit" value="Отправить">
</form>
</main>
</body>
</html>