jquery - jquery - :checkbox:checked 検証が機能しない理由

Question

私はクライアントのアプリケーションに取り組んでいます。特別な検証コーディングが必要になるため、他のいくつかのアプリのようにプラグインを使用することはできません。テキストをドロップダウンフィールドで検証するときにこのコードが機能していましたが、チェックボックスを検証するコードを追加すると壊れました。このjqueryコードで何が間違っていますか? 私のjsFiddle：http://jsfiddle.net/justmelat/7N7bw/

完全な jquery コード:>>

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

このチェックボックスの検証を追加するまで、上記は機能していました: >>

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

ここに新しい提案を含むjqueryがありますが、機能しません>>

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

行に問題があります：

var holdAll = reqButEmpty + chkbx_reqButEmpty;

2つのJQueryオブジェクトを連結することにより、タイプを取得します[Object][Object]。

代わりに次のコードを使用してください。

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

デモ：http： //jsfiddle.net/7N7bw/2/

Answer 2

あなたが試すことができます：

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

Answer 3

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

試す

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