验证 HTML 中的复选框答案

【问题标题】：Validating check boxes in HTML验证 HTML 中的复选框
【发布时间】：2016-02-23 21:16:18
【问题描述】：

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

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

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

【问题讨论】：

如果您想要一个没有 javascript 的解决方案，为什么要用 javascript 标记问题？
HTML5有这个功能，参考这个：HTML5: How to use the “required” attribute with a “radio” input field

标签： css html checkbox radio-button

【解决方案1】：

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

因此，请使用复选框，并仅在选中时显示提交按钮，使用 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">

【讨论】：

在第二种方法中，仍然可以使用选项卡导航并按下空格来提交无效的表单。
@falsarella，好点子！现在进行了编辑，为“提交”按钮提供了一个否定的 tabindex。
不幸的是，将tabindex 设置为-1 显然会禁用标签导航，从而破坏可访问性。
嗯，也许我们可以隐藏提交按钮并显示一个假的基本禁用按钮，然后在检查时再次显示提交...似乎有点棘手，但可能是 html-and-css-唯一的方法。你怎么看？
不错！现在得到了我的 +1 :)

【解决方案2】：

除了@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 中添加了一个“掩码”，因此它可以在旧浏览器中使用。

【讨论】：

pointer-events 在 IE10 及以下版本中不起作用。如果用户在 IE10 中浏览，他们将能够在不选中任何复选框的情况下单击按钮。
@rblarsen，感谢您的评论。我更新了我的答案以支持旧的。我提到pointer-events 在modern browsers 上工作并添加了caniuse 链接。此外，他无论如何都需要验证提交事件（至少是服务器），即使按钮被隐藏，发送表单也不是问题；）
你可以绕过pointer-events not working in IE10 and below with the following JS workaround: codepen.io/jonathan/pen/BriCb .. IE11 也允许指针事件，但前提是链接 display 属性设置为 @ 987654334@ 或 inline-block.
仍然可以使用 tab 导航并按空格提交无效表单。
@falsarella，您可以通过任何方式在浏览器中提交表单。此验证仅适用于不尝试破解的用户的 UX。无论如何，您必须验证服务器中的输入。

【解决方案3】：

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

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

这告诉浏览器不应该在没有选中复选框的情况下提交表单。虽然我推荐java-script，因为并非所有浏览器都能识别这一点。

或者

如果您想检测是否至少按照@RickHitchcock 在cmets 中的建议选中了一个复选框，您可以使用

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>

【讨论】：

除非选中此特定输入，否则无法提交表单。
@RickHitchcock 是的，我想这就是 OP 想要的。
我很确定 OP 要求的复选框组要求“选择一个或多个”而不是“选择这个特定的一个和零个或多个其他”

【解决方案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="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 验证事物的方式

【讨论】：

您是否正确阅读了我的问题，“我想选择多个选项，但一个是强制性的。”并非所有这些都是强制性的......