在HTML中验证复选框

35 浏览
0 Comments

在HTML中验证复选框

我有一个表单，有4个选项（可能是复选框或单选框）。\n我想选择多个选项，但有一个是必选的。\n我知道在JS/jQuery中可以实现，但我想要一个基于HTML/CSS的解决方案。

0

3 答案

0 Comments

在HTML中验证复选框的出现是因为需要确保在提交表单时至少选择一个复选框。解决方法可以使用HTML5中的required属性，或者使用JavaScript来检查是否至少选择了一个复选框。

使用required属性的方法：

该属性告诉浏览器在复选框未被选中时不允许提交表单。然而，由于不是所有浏览器都能识别该属性，因此建议使用JavaScript来实现验证。

另一种方法是使用CSS和HTML结合来检测是否至少选择了一个复选框：

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



  Checkbox 1
  
  Checkbox 1
  
  Checkbox 1
  
  ! Please check at least one checkbox

这段代码会在至少选择一个复选框时才允许提交表单。

验证复选框的目的是确保在提交表单时至少选择一个复选框。可以使用required属性或者结合CSS和HTML使用JavaScript来实现验证。

0
0 Comments

在HTML中验证复选框的原因是为了在用户勾选复选框之前将提交按钮显示为禁用状态。解决方法是使用CSS的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;  
}

同时，HTML部分需要使用以下代码来实现复选框和提交按钮：

需要注意的是，pointer-events属性在IE10及以下的浏览器中不起作用。为了解决这个问题，可以使用以下JS代码的变通方法：codepen.io/jonathan/pen/BriCb。另外，IE11只有在链接的display属性设置为block或inline-block时才支持pointer-events属性。

需要强调的是，这种验证方式仅仅是为了提升用户体验，防止用户未勾选复选框就提交表单。实际上，服务器端仍然需要对输入进行验证。

0
0 Comments

在HTML中验证复选框的出现原因是为了能够选择多个选项。为了实现这一点，复选框可以被使用。如果使用不同的名称，也可以使用单选按钮，但是一旦选中就无法取消选中。

解决方法是使用复选框，并且只有当有任何一个复选框被选中时才显示提交按钮。可以使用通用兄弟选择器(~)来实现：

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

如果想要一个看起来被禁用的提交按钮，可以添加一个被禁用的第二个按钮。当没有复选框被点击时，只显示被禁用的提交按钮。当一个或多个复选框被点击时，只显示启用的提交按钮：

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

在第二种方法中，仍然可以使用Tab键导航和按下空格键来提交无效的表单。为了解决这个问题，可以将提交按钮的tabindex设置为负值。

不幸的是，将tabindex设置为-1会禁用Tab键导航，破坏了可访问性。

可能的HTML和CSS解决方法是隐藏提交按钮，然后显示一个假的基本禁用按钮，当复选框被选中时再显示提交按钮。这个方法似乎有些棘手，但是可以实现纯HTML和CSS的解决方案。

这个方法得到了肯定的评价，现在得到了+1的支持。

0