Javascript 仅当选中至少一个复选框时提交表单

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

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

---

您可以使用

：checked

选择器和

.length

查找选中的复选框计数：

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

选择器将匹配选中的所有元素

你可以试试这个

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

与jQuery方式相当的香草JavaScript，使用

---

最简单的方法是使用javascript，幸运的是有人已经完成了所有工作（使用jQuery）。为了适应这个例子，你需要做的就是将“表格检查”改为“预订”

从本质上讲，该示例所做的是在提交操作之前强制自己，当它看到正在尝试表单时，它会在表单元素中搜索任何具有选中状态的复选框元素，如果找不到任何复选框元素，则会发送一个preventdefault来停止客户端/浏览器对提交操作的默认响应请求将被发送或以其他方式正常发送

关于其他答案，使用===更安全，返回false会给您一些冗余。关于返回false增加了什么的一些讨论

另外，不要使用click（），因为您可能会遇到这样的用例：您在技术上提交表单，但实际上并没有单击表单，比如说，当您点击enter时，请尝试以下操作

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

我建议你用“按钮”代替“提交”

请跟着这个

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" />

$（“#表单id”）。提交（函数（e）{
var totalChecked=$（'#div_id:input[type=“checkbox”]：checked'）。长度；
如果（总检查值<1）
{            
警报（“提交前请至少选择一个复选框”）；
返回false；
}  
});

添加提交处理程序检查

if（$（'.roomselect'）。is（':checked'））

if false阻止表单提交

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

<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" />

$("#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();
    }

         });
    });

$("#form_id").submit(function(e) {        
    var totalChecked = $('#div_id:input[type="checkbox"]:checked').length;        
    if(totalChecked < 1)
    {            
        alert('Please select at least one checkbox before submit');
        return false;
    }  

});