Question

我搜索了之前的帖子，但没有帮助我。我知道HTML5可以选择添加＆＃34; required＆＃34; 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，第一个函数似乎有问题（复选框的值不会改变......）

另外，我不确定我是否正确使用.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 attr）

$('#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>

复选框检查测试与提交按钮

2 个答案: