Флажок и переключатели

В листинге 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>

Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов