Jquery 选中复选框并使用“提交”按钮进行测试_Jquery_Html_Forms_Checkbox

Jquery 选中复选框并使用“提交”按钮进行测试

jquery html forms checkbox

Jquery 选中复选框并使用“提交”按钮进行测试,jquery,html,forms,checkbox,Jquery,Html,Forms,Checkbox,我已经搜索了以前的线程，但是non帮了我这个忙。我知道HTML5有一个选项，可以在复选框中添加一个“必需”属性，这样可以避免所有这些，但我的老师希望我们无论如何都这样做所以我有一个复选框和一个提交按钮。我希望表单仅在选中复选框时提交这是我的密码： <input type="checkbox" name="check" id="test" value="unchecked" onchange="checked()" />some text here<br />

我已经搜索了以前的线程，但是non帮了我这个忙。我知道HTML5有一个选项，可以在复选框中添加一个“必需”属性，这样可以避免所有这些，但我的老师希望我们无论如何都这样做

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

这是我的密码：

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

我使用F12检查页面的DOM，第一个函数中似乎有问题（复选框的值没有改变…）

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

（1）删除onclick内联代码，替换为事件绑定（更好的做法）

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

（2）捕获表单上的提交事件（使用表单的ID attr）

以下是该页面的完整代码：

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


$（'#myFormID'）。提交（函数（e）{
如果（！$（“#test”）.is（“：checked”），则返回false；
警报（'Form has submitted'）；//删除-仅用于示例
e、 preventDefault（）；//删除-仅限于示例
});
这里有一些文本

要检查复选框是否选中，请使用

$（“#测试”）.is（“：checked”）

或

$（“#测试”）.prop（“checked”）

$（'form'）。在（'submit'，函数（）{return$（“#测试”）.is（“：checked”）什么是$（'form'）？我应该把这段代码放在哪里？什么是事件绑定？@NimrodYanai这是在向元素添加事件侦听器时。在上面的示例中：$（'#myFormID'）.submit（）
将submit
事件的侦听器绑定到ID为myFormID
的元素。因此，当该事件（submit
）在该元素（#myFormID
）上触发时，上述代码将执行.Thanx，但这并不能解决我的问题。代码似乎根本无法识别复选框！它不会添加、删除或切换类，也不会更改其值，什么都不会。F12给了我一个关于布尔值的不清楚的信息，即使在我更改了代码之后（我想也许我会识别类而不是值）。您是否在页面的
标记中包含了jQuery库<代码>

我有。我对所有html页面都使用tamplet，它会自动包含它、我的js.js和CSS文件。这是到目前为止我所拥有的代码：'code'函数checked（）{if（$（“#test”）.hasClass（“unchecked”）{$（“#test”）.removeClass（“unchecked”）}else{$（“#test”）.addClass（“unchecked”）}；函数检查（）{if（$（“#test”）.hasClass（“未检查”）{alert（'some text'）}否则{$（“#contact”）.submit（）alert（'other text'）}；'代码'我不知道怎么做，但在一切结束后，我只是删除了按钮，添加了一个新的，按照这些指示，它突然工作。。。这的确很奇怪。

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

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

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

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