验证HTML中的复选框

概述我有一个表格有4个选项(他们可能是复选框或收音机)。 我想选择多个选项，但一个是强制性的。 我知道这是可能的JS / jQuery，但我想要一个HTML / CSS基础解决方案。 为了能够检查多个输入，它们必须是复选框。 (他们可以是具有不同名称的单选按钮，但是一旦检查，您将无法取消选中它们。) 所以使用复选框，只有当选中了提交按钮时才使用general sibling selector(〜)： 我有一个表格有4个选项(他们可能是复选框或收音机)。

我想选择多个选项，但一个是强制性的。

我知道这是可能的Js / jquery，但我想要一个HTML / CSS基础解决方案。

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

所以使用复选框，只有当选中了提交按钮时才使用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">

总结

以上是内存溢出为你收集整理的验证HTML中的复选框全部内容，希望文章能够帮你解决验证HTML中的复选框所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。