验证HTML中的复选框 [英] Validating check boxes in HTML

问题描述

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

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

>

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

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

因此，使用复选框，并且只有使用 一般兄弟选择器 （〜）：

input [type =Submit] {display：none;} input：checked〜input [ type =Submit] {display：inline;}

< input id =c1type =checkbox>< label for =c1>第一< / label>< br>< input id =c2type =checkbox><< ; label for =c2> Second< / label>< br>< input id =c3type =checkbox>< label for =c3> Third< / label>< br>< input id =c4type =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 =c1type =checkbox><<< ; label for =c1> First< / label>< br>< input id =c2type =checkbox>< label for =c2> Second< / label>< br>< input id =c3type =checkbox>< label for =c3>第三< / label>< br>< input id =c4type =checkbox> ;< label for =c4>第四< / label>< br>< input type =Submit>< input type =Submit>

I have a form there are 4 options (they may be check boxes or radio).

I want to select multiple options but one is compulsory.

I know it is possible in JS/jQuery but I want a HTML/CSS base solution.

解决方案

To be able to check multiple inputs, they must be checkboxes. (They could be radio buttons with different names, but you wouldn't be able to uncheck them once checked.)

So use checkboxes, and show the Submit button only if any are checked, using the 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">

---

If you want the appearance of a disabled submit button, add a second button that is disabled.

When no input is clicked, show the disabled submit button only. When one or more inputs are clicked, show the enabled submit button only:

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中的复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！