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

我建议您使用＆＃34;按钮＆＃34;而不是＆＃34;提交＆＃34;。

请关注此

HTML-＆GT;

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

         });
    });

Answer 5

Vanilla JavaScript 相当于 jQuery 方式，使用document.querySelector

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

Demo

Answer 6

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

基本上该示例正在做的是在提交操作之前强制自己，当它看到正在为表单尝试一个然后它在表单元素内搜索具有已检查状态的任何复选框元素，如果它找不到任何是发送一个preventdefault来阻止客户端/浏览器对提交操作请求的默认响应，或者只是正常发送。

另外，对于其他答案，使用===更安全，返回false会给你一些冗余。 Here's关于错误返回的内容的一些讨论。

此外，请不要使用click（），因为您可能遇到技术上提交表单但实际上没有点击它的用例，例如当您按Enter键时

Answer 7

试试这个

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

Answer 8

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

});

仅在选中至少一个复选框时才提交表单

8 个答案: