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

不是用新的html覆盖$('#searchValidationError')，而是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来显示每个错误（使用不同的ID），这样他们就不会互相冲突。

Answer 3

而不是使用

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

您只需查看jQuery v1.6中引入的prop()

即可

像

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

如何使用jquery同时显示复选框验证消息

3 个答案: