web*_*pur 16 html css checkbox html5 radio-button
我有一个表格有4个选项(它们可能是复选框或收音机).
我想选择多个选项,但一个是强制性的.
我知道在JS/jQuery中有可能,但我想要一个HTML/CSS基础解决方案.
Ric*_*ock 41
为了能够检查多个输入,它们必须是复选框.(它们可能是具有不同名称的单选按钮,但一旦检查,您将无法取消选中它们.)
因此,使用复选框,仅在选中任何选项时显示"提交"按钮,使用通用同级选择器(〜):
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">Mos*_*Feu 13
除了@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因此它将在旧浏览器中工作.
Col*_*iza 10
您可以使用required属性Like 在html5中执行此操作
<input type="checkbox" required name="your_checkbox_name">
这告诉浏览器不应该在没有选中复选框的情况下提交表单.虽然我建议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>小智 7
您可以使用以下哪一项是强制性的.
<input type="radio" name="name" required>
没有要求的哪一个如果被勾选则不会被测试.
小智 6
试试这个:
<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验证事物的方式
| 归档时间： |
|
| 查看次数： |
745 次 |
| 最近记录： |