Проверка флажков в HTML

У меня есть форма, там есть 4 варианта (они могут быть флажками или радио).

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

Я знаю, что это возможно в JS/jQuery, но я хочу базовое решение HTML/CSS.

Ответы

Ответ 1

Чтобы иметь возможность проверять несколько входов, они должны быть флажками. (Они могут быть радиокнопками с разными именами, но вы не смогли бы их убрать после их проверки.)

Итак, используйте флажки и покажите кнопку "Отправить", только если они отмечены, используя общий селектор для сиблинга (~):

input[type="Submit"] {
  display: none;
}

input:checked ~ input[type="Submit"] {
  display: inline;
}

<input id="c1" type="checkbox"><label for="c1">First</label><br>
<input id="c2" type="checkbox"><label for="c2">Second</label><br>
<input id="c3" type="checkbox"><label for="c3">Third</label><br>
<input id="c4" type="checkbox"><label for="c4">Fourth</label><br>
<input type="Submit">

Ответ 2

В дополнение к ответу @Rick Hitchcock, я думаю, что вы захотите показать пользователю кнопку submit, но она будет отключена до тех пор, пока не будет отмечен один из флажков.

Если это так, вы можете использовать pointer-events (во всех современных браузерах: http://caniuse.com/#feat=pointer-events):

input[type="Submit"] {
  opacity:0.5;
  pointer-events:none;
  /* animation added for fancy ;) */
  transition:all .2s ease;
}

input:checked ~ .button-wrapper input[type="Submit"] {
  opacity:1;
  pointer-events:all;
}

.button-wrapper {
  position:relative;  
  display:inline-block;
}

.button-wrapper:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:1;
}

input:checked ~ .button-wrapper:before {
  display:none;  
}

<input id="c1" type="checkbox"><label for="c1">First</label><br>
<input id="c2" type="checkbox"><label for="c2">Second</label><br>
<input id="c3" type="checkbox"><label for="c3">Third</label><br>
<input id="c4" type="checkbox"><label for="c4">Fourth</label><br>
<div class="button-wrapper">
  <input type="Submit" tabindex="-1">
</div>

Ответ 3

Вы можете сделать это в html5 с помощью атрибута required Как

<input type="checkbox" required name="your_checkbox_name">

Это говорит браузеру, что форма не должна быть отправлена без проверки флажка. Хотя я рекомендую java-script, так как не все браузеры смогут это распознать.

Или

Если вы хотите определить, выбран ли хотя бы один флажок, предложенный @RickHitchcock в комментариях, вы можете использовать

span {
  display: inline;
  color: red;
}
input[type="Submit"],
input:checked ~ span {
  display: none;
}
input:checked ~ input[type="Submit"] {
  display: inline;
}

<form action="#" method="post">
  <input type="checkbox" />Checkbox 1
  <br />
  <input type="checkbox" />Checkbox 1
  <br />
  <input type="checkbox" />Checkbox 1
  <br />
  <input type="submit" value="Submit" /><span>! Please check at least one checkbox</span>

</form>

Ответ 4

Вы можете использовать следующее, для которого оно является обязательным.

<input type="radio" name="name" required>

Какой из них не требуется, не будет проверен, если он отмечен галочкой или нет.

Ответ 5

Попробуйте следующее:

<input id="c3" type="checkbox" required><label for="c3">Third</label><br>
<input id="c4" type="checkbox" required><label for="c4">Fourth</label><br>

Или вы можете попробовать это с помощью jquery для проверки флажка html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" always required. Nothing and blanks are invalid.  </title>
<link rel="stylesheet" href="#" onclick="location.href='http://jqueryvalidation.org/files/demo/site-demos.css'; return false;">

</head>
<body>
<form id="myform">
<label for="field">Required: </label>
<input type="text" class="left" id="field" name="field">
<br/>
<input type="submit" value="Validate!">
</form>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js">      </script>
 <script src="http://jqueryvalidation.org/files/dist/additional- methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
$( "#myform" ).validate({
  rules: {
field: {
  required: true
}
  }
});
</script>
</body>
</html>

required - способ, которым html проверяет вещи