如何使用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

您应该为显示的每个错误使用不同的div（使用不同的ID），这样它们就不会相互冲突。的

Answer 2

而不是覆盖$('#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 3

而是采用

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

，你可以简单地从prop() jQuery的V1.6

像

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

介绍检查