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

Posted 2023-02-21

【中文标题】在允许提交之前复选框在表单上不起作用

【英文标题】：Check box not working on form before allowed to submit

【发布时间】：2021-12-09 01:48:12

【问题描述】：

大家好，在提交我的按钮之前需要点击我的复选框，这是一个 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>

【问题讨论】：

可以编写一个自定义的JS函数来验证复选框是否被选中。 ***中有很多答案

看看这个Fiddle

我有自己的按钮，请参阅上面的代码

【参考方案1】：

不幸的是，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>

【讨论】：

这不起作用我有我自己的按钮

开始搜索

@JockStrap 您的不是按钮，它是指向另一个页面的链接，您需要在按钮中键入 =“submit” 等并检查复选框的状态，单击指向另一个页面的链接将直接将您重定向到该页面而不检查复选框的状态。 myCheck 是我回答中的 id，您可以将其更改为您的 id。

【参考方案2】：

您可以向 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);

【讨论】：

这不起作用

抱歉，我把语法弄混了。我已经对其进行了编辑，现在它应该可以正常工作了。

看起来很抱歉，但这解释得不够好我想添加什么 document.getElementById('generateButton').addEventListener('click', clickHandler);也？？它不起作用

您要么需要使用 defer 标志加载 javascript 文件，要么只在 DOMContentLoaded 事件的事件侦听器内调用函数