仅在至少选中一个复选框的情况下提交表格

Question

我正在验证表单。在这种形式下，您必须通过复选框选择至少一个元素，而我不确定它们的数量（取决于元素数量）。如果选中了一个或多个复选框，则需要启用提交输入，如果没有选中任何复选框，则需要禁用提交输入，我该怎么办？这是我的代码：

<form id="booking">
<input type="checkbox" name="room1" class="roomselect"/>
<input type="checkbox" name="room2" class="roomselect"/>
<input type="checkbox" name="room3" class="roomselect"/>
<input type="submit" value="Request" id="subm" />
</form>

Answer 1

//dom ready handler
jQuery(function ($) {
    //form submit handler
    $('#booking').submit(function (e) {
        //check atleat 1 checkbox is checked
        if (!$('.roomselect').is(':checked')) {
            //prevent the default form submit if it is not checked
            e.preventDefault();
        }
    })
})

Answer 2

您可以将:checked选择器与.length一起使用，以查看已选中的复选框数：

var len = $(".roomselect:checked").length;
if(len>0){
    //more than one checkbox is checked
 }

Demo

Answer 3

:checked选择器将匹配所有选中或选择的元素。

您可以尝试这个

$("#subm").click(function(e){
        if($(".roomselect:checked").length == 0){
            e.preventDefault();
        }
    });

Answer 4

我建议您使用“按钮”而不是“提交”。

请遵循此

HTML->

<form id="booking" action="https://www.google.co.in/search">
      <input type="checkbox" value="facebook" name="q"/>
       <input type="checkbox" value="gmail" name="q"/>
       <input type="checkbox" value="stackoverflow" name="q"/>
<input type="button" value="Request" id="submit" />

$（function（）{

$("#submit").click(function(e){

    var number_of_checked_checkbox= $("input[name=q]:checked").length;
    if(number_of_checked_checkbox==0){
        alert("select any one");
    }else{
        $("#booking").submit();
    }

         });
    });

Answer 5

香草JavaScript等效于jQuery的方式，使用document.querySelector

document.querySelector

if (document.querySelector('.roomselect:checked')) {
    // somethings checked
}

Answer 6

最简单的方法是使用javascript，幸运的是，某人已经完成了所有工作Demo（使用jQuery）。您只需要做的就是将#form_check更改为#booking。

本质上，该示例正在执行的操作是在看到表单正被尝试时强制其自身在提交操作之前，然后它在form元素内搜索具有选中状态的所有复选框元素，如果找不到任何正在发送的复选框preventdefault可以停止客户端/浏览器对提交操作请求的默认响应，也可以像往常一样发送。

也关于其他答案，使用===更安全，返回false会给您带来一些冗余。 here关于return false添加的内容的一些讨论。

另外，不要为此使用click（），因为您可能会遇到一些用例，在这些用例中，您是在技术上提交表单，但实际上并没有单击它，例如当您按下Enter键时说]

Answer 7

尝试一下

Answer 8

var checked = false;
$(function(){
    $('#subm').click(function(e){
        checkall();
        if(!checked){
            e.preventDefault();
        }
    });
    $('.roomselect').change(function(e){
        checkall();
    });
    checkall();
});
function checkall()
{
    checked = $('.roomselect:checked').length > 0;
    $('#subm').prop('disabled',!checked);
}