javascript中的复选框验证单个复选框失败

Question

我在 JSP 页面上动态创建了复选框，如下所示

<form name="CancelForm" onsubmit="return validate();" action="ServletCancel" method="post">                  
<%   
for(int index=0 ; index<lstID.size() ; index++)
{
     String strBookingID = lstID.get(index);
%>
<input type="checkbox" name="BookingID" value="<%=strBookingID%>">
<%
}%>
<input type="submit" value="Cancel" class="button1"/>
</form>

为了验证相同，我使用下面的 JavaScript 代码来验证表单中的至少一个复选框被选中，如果是这样，它应该返回“true”，否则返回“false”并发出警告以检查至少一个选项。

function validate() { 
    var flag = "false";
    var CHKBBookingID = document.CancelForm.BookingID;

    alert("length of checkboxes >> "+CHKBBookingID.length)
    for (var i = 0; i < CHKBBookingID.length ; i++) { 
        if (CHKBBookingID[i].checked == true) { 
            flag = "true";
        } 
    }    
    if(flag == "false"){
        alert("You have not selected any passenger yet!");
        return false;
    } else {
        return true;
    }
} 

如果表单中有 2 个或更多复选框，则此验证非常有效。
但另一方面，如果我只有一个复选框，则验证警报会将复选框的“长度”显示为“未定义”并且即使选中了表单上唯一的复选框也会失败

Answer 1

var CHKBBookingID = document.CancelForm.BookingID;

导致问题。如果您将其命名为var，则它被视为变量，因为您传递了一个元素。

所以你需要将javascript数组初始化为，

var CHKBBookingID = Array(document.CancelForm.BookingID)

将它们输入到数组中

Learn More. .

更新：

使用jquery可以轻松获取复选框的数量，

var CHKBBookingID = new Array();
$.each($("input[name='BookingID[]']:checked"), function() {
  values.push($(this).val());
  // or you can do something to the actual checked checkboxes by working directly with  'this'
  // something like $(this).hide() (only something useful, probably) :P
});