Question

对于类似于以下示例代码，当用户使用Jquery命中提交时，如何执行以下操作 1）检查复选框是否已选中。 - 如果是，请提交表格。 - 如果没有，请显示提醒“请在提交表单前选中复选框”，取消表单提交。 2）之后，当选中复选框时，可以提交表格。

<html>
    <form>
        <input type="checkbox" name="chbox" id="chbox">Check this box before submission 
        <br>
        <input type="submit" value="submit" id="submit">
    </form>
  </html>

Answer 1

您可以在复选框中添加必需属性。我建议你也将文本包装在标签中。

<label> <input type="checkbox" name="chbox" id="chbox" required>Check this box before submission </label>

Answer 2

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
    <form id="myForm">
        <input type="checkbox" name="chbox" id="chbox">Check this box before submission 
        <br>
        <input type="submit" value="submit" id="submit">
    </form>
<script type="text/javascript">
$(function(){
$("#myForm").on('submit',function(){
if(document.getElementById("chbox").checked)
{
$("#myForm").submit();
}
else
{
e.preventDefault();
alert('Please check the box before submitting the form');
}
});
});
</script>
</body>
</html>

仅在选中复选框时提交表单

2 个答案: