验证 HTML 中的复选框

Question

我有一个表单有 4 个选项（它们可能是复选框或单选框）。

我想select多个选项，但必须有一个。

我知道在 JS/jQuery 中是可行的，但我想要一个基于 HTML/CSS 的解决方案。

Answer 1

您可以使用以下必填项。

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

没有required的勾不勾都不测试

Answer 2

您可以在 html5 中使用 required 属性执行此操作喜欢

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

这告诉浏览器不应该在没有复选框的情况下提交表单 checked.Although 我建议 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>

Answer 3

为了能够检查多个输入，它们必须是复选框。（它们可能是具有不同名称的单选按钮，但一旦选中它们就无法取消选中。）

因此使用复选框，并且仅在选中时显示提交按钮，使用 general sibling selector (~):

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">

如果您想要禁用提交按钮的外观，请添加第二个禁用按钮。

当没有点击输入时，只显示禁用的提交按钮。单击一个或多个输入时，仅显示启用的提交按钮：

input[type="Submit"]:not([disabled]) {
  display: none;
}

input:checked ~ input[type="Submit"]:not([disabled]) {
  display: inline;
}

input:checked ~ input[disabled] {
  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>

<input type="Submit" disabled>
<input type="Submit">

Answer 4

根据@Rick Hitchcock 的回答，我认为您会希望向用户显示提交按钮，但在选中其中一个复选框之前该按钮将被禁用。

如果是这样，您可以像这样使用 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>

编辑我在 .button-wrapper:before 中添加了 "mask" 所以它可以在旧浏览器中工作。

Answer 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="http://jqueryvalidation.org/files/demo/site-demos.css">

</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 验证事物的方式

验证 HTML 中的复选框

Validating check boxes in HTML

html

css

checkbox

radio-button