В этом уроке мы закрепим материал по выбору элементов в документе, создав простую форму для проверки выбора пользователем пола (мужской или женский).
Создание формы и обработка событий
Создадим форму с двумя радиокнопками для выбора пола и кнопкой «Готово». Добавим <span> с id="mess" для вывода сообщений. К кнопке «Готово» добавим обработчик события click, который будет запускать функцию проверки выбора пола.
<form>
<input type="radio" name="sex" value="male" id="male">
<label for="male">Мужской</label><br>
<input type="radio" name="sex" value="female" id="female">
<label for="female">Женский</label><br>
<button type="button">Готово</button>
<span id="mess"></span>
</form>$('button').click(function() {
let state = $('input[name="sex"]:checked').val();
if (state === undefined) {
$('#mess').html(`<font style="color:red;">Укажите ваш пол</font><br>`);
} else {
console.log(state);
// Дальнейшая обработка state (например, вывод картинки)
if (state === 'male') {
$('#image').css('display', 'block');
}
}
});Проверка выбора пола
Функция проверки использует jQuery селектор :checked для выбора выбранного радио-инпута с именем sex. Метод val() возвращает значение выбранного элемента. Если пользователь ничего не выбрал, переменная state будет undefined.
Вывод значения и дополнительная функциональность
Если пол выбран (state определено), выводим его значение в консоль. Пример дополнительной функциональности: отображение изображения в зависимости от выбранного пола. Для этого используется метод css(‘display’, ‘block’) для отображения изображения с id image.
В этом уроке мы создали простую форму с проверкой выбора пола, используя jQuery селекторы и обработку событий. Мы рассмотрели использование псевдокласса :checked и обработку ситуации, когда пользователь не выбрал пол. Полученный опыт позволит вам создавать более сложные веб-приложения с помощью jQuery.