Question

<input type="checkbox" name="category" value="Restorative"><label for="">Restorative</label>
<br>
<input type="checkbox" name="category" value="Esthetics"><label for="">Esthetics</label>
<br>
<input type="checkbox" name="category" value="Implants"><label for="">Implants</label>

所有复选框均与向数据库发送值有关。用户必须至少选择一个

恢复性
        美学
        植入物

不使用select选项如何实现？

Answer 1

您可以使用JavaScript轻松地做到这一点！您需要做的就是将ID添加到所需的复选框，然后将其与以下JavaScript代码链接。

document.getElementById("myCheck").required = true;

在提交表单时被触发。

您可以通过单击here.

了解更多信息

Answer 2

您可以使用event.preventDefault()取消提交事件。然后遍历复选框，如果其中至少有一个被选中：checkboxObj.checked，然后提交表单：formObj.submit()。但是，如果没有检查任何内容，请显示错误通知。

演示

演示中评论的详细信息

// Reference the form
var form = document.forms[0];

// Register the form to the submit event
form.onsubmit = validate;

/*
Called on submit event...
Prevent the form from submitting
Reference all form controls in form
Collect all [name=category] into an array
Iterate through the [name=category]
If one of them is checked submit the form
Otherwise reveal the error notification
*/
function validate(e) {
  e.preventDefault();
  var ui = this.elements;
  var chx = Array.from(ui.category);
  for (let c of chx) {
    if (c.checked) {
      this.submit();
    }
  }
  ui.req.style.display = 'block';
}

:root {
  font: 400 16px/1 Consolas
}

input,
label {
  display: inline-block;
  font: inherit;
  height: 1.5rem;
  line-height: 1.5rem;
  vertical-align: middle
}

[type=submit] {
  float: right
}

#req {
  display: none;
  position: relative;
  z-index: 1;
  background: #fed;
  width: 200px;
  padding: 10px;
  bottom: 100px;
  left: 175px;
  text-align: center;
}

<form id='form'>
  <fieldset>
    <input id='res' name="category" type="checkbox" value="Restorative">
    <label for="res">Restorative</label>
    <br>
    <input id='est' name="category" type="checkbox" value="Esthetics">
    <label for="est">Esthetics</label>
    <br>
    <input id='imp' name="category" type="checkbox" value="Implants">
    <label for="imp">Implants</label>
    <br>
    <input type='submit'>
  </fieldset>
  <output id='req'>Please check at least checkbox</output>
</form>

要求用户至少选择一个HTML复选框

2 个答案:

演示