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

В листинге 8.5 рассматривается получение значений флажков и переключателей. Первая форма демонстрирует проверку установки флажка и получение выбранного переключателя в группе. Если флажок установлен, то выводим значение параметра value. Вторая форма демонстрирует поиск установленных флажков в группе, а также возможность установки и снятия всех флажков сразу.

Листинг 8.5. Обработка флажков и переключателей

<!doctype html>
<html>
<head>
<title>Обработка флажков и переключателей</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
   $("#btn1").click(function() {
      var msg = "";
      var elem = $("#check1");
      if (elem.is(":checked")) {
         msg = "Флажок установлен\n";
         msg += "Значение: " + elem.val() + "\n";
      }
      else {
         msg = "Флажок снят\n";
      }
      var value1 = $("#frm1 input[name='radio1']:checked").val();
      if (value1 == "male") {
         msg += "Пол: Мужской\n";
      }
      else {
         msg += "Пол: Женский\n";
      }
      alert(msg);
   });
   $("#c0").click(function() {
      if ($("#c0").is(":checked")) {
         $("#frm2 :checkbox").attr("checked", true);
      }
      else {
         $("#frm2 :checkbox").removeAttr("checked");
      }
   });
   $("#btn2").click(function() {
      var msg = "";
      $("#frm2 input[name='c[]']:checked").each(function() {
         msg += "Значение: " + this.value + "\n";
      });
      if (msg == "") alert("Флажки не установлены");
      else alert(msg);
   });
});
</script>
</head>
<body>
<form action="test.php" method="GET" id="frm1">
<input type="checkbox" name="check1" id="check1" value="yes" checked>
Текст<br><br>
Укажите ваш пол:<br>
<input type="radio" name="radio1" value="male" checked>
Мужской
<input type="radio" name="radio1" value="female">Женский
<br><br>
<input type="button" value="Вывести значения" id="btn1">
</form>
<form action="test.php" method="GET" id="frm2">
<input type="checkbox" name="c0" id="c0"> Отметить/Снять все<br>
<input type="checkbox" name="c[]" value="1"> Пункт 1<br>
<input type="checkbox" name="c[]" value="2"> Пункт 2<br>
<input type="checkbox" name="c[]" value="3"> Пункт 3<br>
<input type="button" id="btn2" value="Вывести значения">
</form>
</body>
</html>
Предыдущая статья Все статьи Следующая статья