带提交按钮的复选框检查测试答案

【问题标题】：checkbox checked test with submit button带提交按钮的复选框检查测试
【发布时间】：2015-05-09 03:31:26
【问题描述】：

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

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

这是我的代码：

<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()。它会提交到我为表单提供的原始地址吗？

【问题讨论】：

检查复选框是否被选中使用$("#test").is(":checked")或$("#test").prop("checked")
$('form').on('submit', function() { return $("#test").is(":checked"); });
$('form') 是什么？我应该把这段代码放在哪里？

标签： jquery html forms checkbox

【解决方案1】：

(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>

【讨论】：

什么是事件绑定？
@NimrodYanai 当您向元素添加事件侦听器时。在上面的示例中：$('#myFormID').submit() 将 submit 事件的侦听器绑定到 ID 为 myFormID 的元素。因此，当该事件 (submit) 在该元素 (#myFormID) 上触发时，上述代码就会执行。
谢谢，但这并不能解决我的问题。该代码似乎根本无法识别该复选框！它不会添加、删除或切换一个类，它不会改变它的值，什么都没有。 F12 给我一个关于布尔值的不清楚的信息，即使在我更改了代码之后（我想也许我会识别类而不是值）。
您是否在页面的<head> 标记中包含了jQuery 库？ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
我有。我为我的所有 html 页面使用了一个 tamplet，它自动包含它、我的 js.js 和 CSS 文件。这是我到目前为止的代码：'code' function checked() { if ($("#test").hasClass("unchecked")) { $("#test").removeClass("unchecked") }否则 { $("#test").addClass("unchecked") } }; function check() { if ($("#test").hasClass("unchecked")) { alert('some text') } else { $("#contact").submit() alert('other text' ) } };'代码'

【解决方案2】：

<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');
}

【讨论】：

好吧，我不知道怎么做，但在完成所有操作后，我只是删除了按钮，添加了一个新按钮，按照这些说明操作，它突然起作用了……这确实很奇怪。