Question

我正在为客户开发一个应用程序。将需要特殊的验证编码，因此我不能像其他几个应用程序那样使用插件。我在验证文本下拉字段时有这个代码工作，但是当我添加代码来验证复选框时它就破了。我在这个jquery代码中做错了什么？ 我的jsFiddle ：http://jsfiddle.net/justmelat/7N7bw/

完整的jquery代码：＆gt;＆gt;

$(document).ready(function(){
    $("#btnCatchReqFlds").on('click', function(){
        $("#holdErrMsg").empty();
        var reqButEmpty = $('fieldset:visible').find('input[type="text"][class*="-required"],textarea[class*="-required"],select[class*="-required"]').filter(function() 
            {
                    return $.trim($(this).val()) === "";
            });
        var chkbx_reqButEmpty = $('fieldset:visible').find('input[type="checkbox"][class*="-required"]').filter(function() 
            {
                    return !$(this).is(':checked')
            });
                    var holdAll = reqButEmpty + chkbx_reqButEmpty;
                    if(holdAll.length > 0)
                        {
                            holdAll.each(function() {
                                $('#holdErrMsg').append("Please fill in the " + this.name + "<br />"); 
                            });
                        }
                    return !holdAll.length;
                });
        });

上述工作正常，直到我添加了此复选框验证：＆gt;＆gt;

var chkbx_reqButEmpty = $('fieldset:visible').find('input[type="checkbox"][class*="-required"]').filter(function() 
            {
                    return !$(this).is(':checked')
            });
                    var holdAll = reqButEmpty + chkbx_reqButEmpty;

这是带有新建议的jquery - 但不起作用＆gt;＆gt;

$(document).ready(function(){
    $("#btnCatchReqFlds").on('click', function(){
        $("#holdErrMsg").empty();
        var reqButEmpty = $('fieldset:visible').find('input[type="text"][class*="-required"],textarea[class*="-required"],select[class*="-required"]').filter(function() 
            {
                    return $.trim($(this).val()) === "";
            });
        //var chkbx_reqButEmpty = $('fieldset:visible').find('input[type="checkbox"][class*="-required"]').filter(function() 
        var chkbx_reqButEmpty = $('fieldset:visible').find('input:checked[class*="-required"]').filter(function() 
            {
                    console.log(this);
                    //return !$(this).is(':checked')
                    //return !this.checked;
                    return $(this).is(!':checked');
            });
                    //var holdAll = reqButEmpty + chkbx_reqButEmpty;
                    //var holdAll = reqButEmpty.concat(chkbx_reqButEmpty).length;
                    var holdAll = $.extend(reqButEmpty,chkbx_reqButEmpty);
                    if(holdAll.length > 0)
                        {
                            holdAll.each(function() {
                                $('#holdErrMsg').append("Please fill in the " + this.name + "<br />"); 
                            });
                        }
                    return !holdAll.length;
                });
        });

Answer 1

您是否在查找功能中尝试使用(input:checked)？

$('fieldset:visible').find('input:checked[class*="-required"]').filter(function(){});

编辑：

不应该这一行：return !$(this).is(':checked') 是return $(this).is(':checked')

编辑：

if(!$(this)is(':checked')
    return true/false;

Answer 2

尝试

return $(this).is(!':checked')

Answer 3

行中存在问题：

var holdAll = reqButEmpty + chkbx_reqButEmpty;

通过连接两个JQuery对象，您可以获得类型[Object][Object]。

请改用此代码：

var holdAll = $.extend(reqButEmpty,chkbx_reqButEmpty);

DEMO： http://jsfiddle.net/7N7bw/2/

Answer 4

您可以尝试：

var chkbx_reqButEmpty = $('fieldset:visible').find('input[type="checkbox"][class*="-required"]').filter(function() {
      return !this.checked;
});
var holdAll = reqButEmpty.concat(chkbx_reqButEmpty).length;

jquery - 为什么不：checkbox：选中验证不起作用

4 个答案: