Question

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

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

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

Answer 1

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

所以使用复选框，只有在选中任何内容时才显示“提交”按钮，使用general sibling selector（〜）：

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13; 如果要显示已禁用的提交按钮，请添加第二个已禁用的按钮。

如果未单击任何输入，则仅显示已禁用的提交按钮。单击一个或多个输入时，仅显示启用的提交按钮：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

除了@Rick Hitchcock的答案之外，我认为你会想要向用户显示按钮提交但是它将被禁用，直到其中一个复选框被选中。

如果是这样，您可以使用pointer-events（在所有现代浏览器中：http://caniuse.com/#feat=pointer-events），如下所示：

＆＃13;

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;  
}

＆＃13;

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

＆＃13;

编辑我添加了一个＆＃34;掩码＆＃34;在.button-wrapper:before中，因此它可以在旧浏览器中使用。

Answer 3

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

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

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

或

如果您想要检测@RickHitchcock在评论中是否选择了至少一个复选框，您可以使用

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

您可以使用以下哪一项是强制性的。

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

如果勾选或不勾选，则不会测试哪一个。

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中的复选框

5 个答案: