带有提交按钮的复选框选中测试

Question

我已经搜索过以前的线程，但没有帮助我解决这个问题。我知道 HTML5 可以选择向复选框添加 "required" attr，这样可以避免所有这些，但我的老师还是希望我们这样做...

所以我有一个复选框和一个提交按钮。我希望仅在复选框被选中时才提交表单。

这是我的代码：

<input type="checkbox" name="check" id="test" value="unchecked" onchange="checked()" />some text here<br />
            <input type="submit" onclick="check()"/>

和 JS：

    function checked() { //This function changes the value of the checkbox for the next function.
if ($("#test").val() == "unchecked") {
    $("#test").val("checked")
}
else {
    $("#test").val("unchecked")
}
};

function check() { //This function tests if the "contact us" form should be sent.
if ($("#test").val() == "checked") {
    $("#test").submit()
}
else {
    alert("please agree to terms blah blah blah")
}
};

我用F12查看了页面的DOM，第一个函数好像有问题（checkbox的值没变。。。）

此外，我不确定我是否正确使用了 .submit()。它会提交到我为表格提供的原始地址吗？

Answer 1

<label for="test"><input type="checkbox" name="check" id="test" value="unchecked" />some text here</label><br />
<input type="submit" value="Submit" />

和 js

$(document).ready(function() {
    $('form').on('submit', check);
});

function check() {
    return $('#test').is(':checked');
}

Answer 2

(1) 删除 onclick 内联代码，替换为事件绑定（更好的做法）
(2) 在表单上捕获提交事件（使用表单的ID属性）

$('#myFormID').submit(function(e){
    if ( !$('#test').is(':checked') ) return false;
    alert('Form has submitted'); //REMOVE - ONLY FOR EXAMPLE
    e.preventDefault(); //REMOVE - ONLY FOR EXAMPLE
});

jsFiddle Demo

这是页面的完整代码：

<!DocType HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta charset="UTF-8">

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/flick/jquery-ui.css" />
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
        <script type="text/javascript">
            $('#myFormID').submit(function(e){
                if ( !$('#test').is(':checked') ) return false;
                alert('Form has submitted'); //REMOVE - ONLY FOR EXAMPLE
                e.preventDefault(); //REMOVE - ONLY FOR EXAMPLE
            });
        </script>
    </head>
    <body>

        <form id="myFormID">
            <input type="checkbox" name="check" id="test" value="unchecked" />some text here<br />
            <input type="submit" />
        </form>

    </body>
</html>

带有提交按钮的复选框选中测试

checkbox checked test with submit button

html

forms

checkbox

jquery