自定义有效性至少一个复选框被选中

Question

我有两个用于性别的复选框。 雄性和雌性。 我将如何选择至少一种性别的验证方式。 从星期一到星期日，我还有1周的时间。 这也是至少一天的选择。 这是我的jQuery

$(document).ready(function(){
            // --- set required message --- //

                var msg="";
                var elements = document.getElementsByTagName("INPUT");

                for (var i = 0; i < elements.length; i++) {
                   elements[i].oninvalid =function(e) {
                        if (!e.target.validity.valid) {
                        switch(e.target.name){                              
                            case 'gender' :
                                e.target.setCustomValidity("Please select at least one gender.");break;                             
                            case 'days' :
                                e.target.setCustomValidity("Please select at least one day.");break;
                            case 'location' :
                                e.target.setCustomValidity("Please enter a location where the image can be seen.");break;
                        default : e.target.setCustomValidity("");break;

                        }
                       }
                    };
                   elements[i].oninput = function(e) {
                        e.target.setCustomValidity(msg);
                    };
                }
            });



<input type=checkbox name=gender[] required>Male
<input type=checkbox name=gender[] required>Female

<input type=checkbox name=days[] required>Monday
<input type=checkbox name=days[] required>Tuesday
<input type=checkbox name=days[] required>Wednesday
<input type=checkbox name=days[] required>Thursday
<input type=checkbox name=days[] required>Friday
<input type=checkbox name=days[] required>Saturday
<input type=checkbox name=days[] required>Sunday

Answer 1

if($("input[name='gender[]']:checked").length > 0){

}

这应该可以解决问题，但是不确定它是否喜欢名称中的[]。

基本上告诉jquery提取所有已选择的性别为[]的输入。 您要做的就是检查长度。

Answer 2

而不是使用html5必需和有效性。。您可以仅使用jquery查看是否已选中复选框。

if($("input[name='gender[]']").is(":checked").length < 1){
 // no gender selected..
 var errmsg = $("<div class='error'>Please select at least one gender</div>");

}
if($("input[name='days[]']").is(":checked").length < 1){
 // no day selected..
 var errmsg = $("<div class='error'>Please select at least one day</div>");
}

$("containerelement").append(errmsg);

Answer 3

您可以在jquery中使用:checked看这个例子Jquery API文档：checked

var n = $( "input:checked" ).length; 这样，您就可以使用jquery中的类选择器来检查您想要输入的输入数量，这些输入将根据您要验证的情况进行应用。