Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Флажок и переключатели
В листинге 1.24 рассматривается получение значений флажков и переключателей. Первая форма демонстрирует проверку установки флажка и получение выбранного переключателя в группе. Если флажок установлен, то выводим значение параметра value
. Вторая форма демонстрирует поиск установленных флажков в группе, а также возможность установки и снятия всех флажков сразу.
Листинг 1.24. Обработка флажков и переключателей
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<title>Обработка флажков и переключателей</title>
</head>
<body>
<div class="container my-3">
<form action="#" method="GET" id="frm1">
<div class="form-group form-check">
<input type="checkbox" class="form-check-input"
name="check1" id="check1" value="yes" checked>
<label class="form-check-label" for="check1">Текст</label>
</div>
<p>Укажите ваш пол:</p>
<div class="form-group">
<div class="form-check">
<input type="radio" name="sex" id="radio1" value="male"
class="form-check-input">
<label class="form-check-label" for="radio1">Мужской</label>
</div>
<div class="form-check">
<input type="radio" name="sex" id="radio2" value="female"
class="form-check-input">
<label class="form-check-label" for="radio2">Женский</label>
</div>
</div>
<button type="button" class="btn btn-primary" id="btn1">
Вывести значения</button>
</form>
</div>
<div class="container my-3">
<form action="#" method="GET" id="frm2">
<div class="form-group">
<div class="form-check mb-3">
<input type="checkbox" class="form-check-input"
name="c0" id="c0" value="0">
<label class="form-check-label"
for="c0">Установить/Сбросить все</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input"
name="c[]" id="c1" value="1">
<label class="form-check-label" for="c1">Пункт 1</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input"
name="c[]" id="c2" value="2">
<label class="form-check-label" for="c2">Пункт 2</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input"
name="c[]" id="c3" value="3">
<label class="form-check-label" for="c3">Пункт 3</label>
</div>
</div>
<button type="button" class="btn btn-primary" id="btn2">
Вывести значения</button>
</form>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function() {
$('#btn1').click( function() {
var msg = '';
var elem = $('#check1');
if ( elem.is(':checked') ) {
msg = 'Флажок установлен\n';
msg += 'Значение: ' + elem.val() + '\n';
}
else {
msg = 'Флажок снят\n';
}
var sex = $('#frm1 input[name="sex"]:checked').val();
if (sex === 'male') {
msg += 'Пол: Мужской\n';
}
else if (sex === 'female') {
msg += 'Пол: Женский\n';
}
window.alert(msg);
});
$('#c0').click( function() {
if ( $('#c0').prop('checked') ) {
$('#frm2 input[name="c[]"]').prop('checked', true);
}
else {
$('#frm2 input[name="c[]"]').prop('checked', false);
}
});
$('#btn2').click( function() {
var msg = '';
$('#frm2 input[name="c[]"]:checked').each( function() {
msg += 'Значение: ' + this.value + '\n';
});
if (msg === '') window.alert('Флажки не установлены');
else window.alert(msg);
});
});
</script>
</body>
</html>
Помощь сайту
ЮMoney (Yandex-деньги): 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов