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

介紹檢查