Как я могу отображать сообщения проверки флажка одновременно, используя jquery

Question

У меня проблема с отображением сообщений проверки одновременно.Фактически, только один показывает запись сейчас:

$('input').bind('click', function(){
                var checkboxes_claimType = $("#field-claimType-wrapper").find("input:checked");
                if (checkboxes_claimType.length) {
                    $('#label-claimtype-wrapper label').css('color', 'black');
                    $('#searchValidationError').hide();
                }
                else {
                    $('#label-claimtype-wrapper label').css('color', 'red');
                    $('#searchValidationError').html('<p>Please select Claim Type</p>');
                    $('#searchValidationError').show();
                }
                var checkboxes_claimStatus = $("#field-claimStatus-wrapper").find("input:checked");
                if (checkboxes_claimStatus.length) {
                    $('#label-claimstatus-wrapper label').css('color', 'black');
                    $('#searchValidationError').hide();
                }
                else {
                    $('#label-claimstatus-wrapper label').css('color', 'red');
                    $('#searchValidationError').html('<p>Please select Claim Status</p>');
                    $('#searchValidationError').show();
                }
            });

Оператор else в первом условии переопределяет оператор else во втором условии, каков наилучший способ решить это?

Answer 1

Вместо перезаписи $('#searchValidationError') новым html, вы можете append это, например:

$('input').bind('click', function(){
                var checkboxes_claimType = $("#field-claimType-wrapper").find("input:checked");
                $('#searchValidationError').html('');
                if (checkboxes_claimType.length) {
                    $('#label-claimtype-wrapper label').css('color', 'black');
                    $('#searchValidationError').hide();
                }
                else {
                    $('#label-claimtype-wrapper label').css('color', 'red');
                    $('#searchValidationError').append('<p>Please select Claim Type</p>');
                    $('#searchValidationError').show();
                }
                var checkboxes_claimStatus = $("#field-claimStatus-wrapper").find("input:checked");
                if (checkboxes_claimStatus.length) {
                    $('#label-claimstatus-wrapper label').css('color', 'black');
                    $('#searchValidationError').hide();
                }
                else {
                    $('#label-claimstatus-wrapper label').css('color', 'red');
                    $('#searchValidationError').append('<p>Please select Claim Status</p>');
                    $('#searchValidationError').show();
                }
            });

Или, если вы хотите поднять это на ступеньку выше, вы можете создать массив, в который вы помещаете ошибки:

$('input').bind('click', function(){
                var checkboxes_claimType = $("#field-claimType-wrapper").find("input:checked");
                var errors = [];
                if (checkboxes_claimType.length) {
                    $('#label-claimtype-wrapper label').css('color', 'black');
                    errors.push("Please select Claim Type");

                }
                else {
                    $('#label-claimtype-wrapper label').css('color', 'red');
                }


                var checkboxes_claimStatus = $("#field-claimStatus-wrapper").find("input:checked");
                if (checkboxes_claimStatus.length) {
                    $('#label-claimstatus-wrapper label').css('color', 'black');
                }else{
                    $('#label-claimstatus-wrapper label').css('color', 'red');
                    errors.push("Please select Claim Status");
                }
                $('#searchValidationError').html('');
                if (errors.length>0){
                    $.each(errors,function(i,e){
                        $('#searchValidationError').append('<p>'+e+'</p>');
                    });

                    $('#searchValidationError').show();
                }else{
                    $('#searchValidationError').hide();
                }
            });

Answer 2

вы должны использовать разные div для показа каждой ошибки (с разными идентификаторами), чтобы они не конфликтовали друг с другом.

Answer 3

вместо использования

 var checkboxes_claimType = $("#field-claimType-wrapper").find("input:checked");
 if (checkboxes_claimType.length) {

Вы можете просто проверить из prop () , представленного в jQuery v1.6

как

$(elem).prop("checked") // returns boolean value