在允许提交之前，复选框在表单上不起作用

Question

大家好，试图让我的复选框需要在提交我的按钮之前单击，这是一个 onclick 而不是提交？？

<form>
  <p>
    <input style="padding:14px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; width: 300px; border: none;" placeholder="Enter Date Here... e.g 17/05/1981" />
  </p>

  <p>

    <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat" required="true"> <label style="color: #fff; font-size: 10px;"> Please Accept Terms</label></p>

  <p><a id="generateButton" href="generate.html" class="progress-button red" data-loading="Creating..." data-finished="Start Over" data-type="background-vertical" onclick="getRandomImage()">Start Search</a></p>
</form>

Answer 1

您可以向 clickHandler 添加逻辑以检查是否选中了该框。因此，不是直接调用 getRandomImage()，而是添加一些逻辑来有条件地调用函数。

function clickHandler() {
  // get the checkbox element from the DOM
  const checkboxElement = document.getElementById('vehicle3');
  // see if the checkbox is checked
  if (checkBoxElement && checkBoxElement.checked) {
    getRandomImage();
  } else {
    console.log("The checkbox wasn't checked!");
  }
}

// add the handler to the button
document.getElementById('generateButton').addEventListener('click', clickHandler);

Answer 2

遗憾的是 HTML5 没有提供开箱即用的方法。

但是，使用 jQuery 或 javascript，您可以轻松控制复选框组是否至少有一个选中的元素。

function myFunction() {
  document.getElementById("myCheck").required = true;
}

<form action="/action_page.php">
  Checkbox: <input type="checkbox" id="myCheck" name="test">
  <input type="submit" onclick="myFunction()">
</form>

在允许提交之前，复选框在表单上不起作用

Check box not working on form before allowed to submit

html

javascript

checkbox

submit

button