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

第一条件で他の文はこれを解決する最良の方法は何か第二の条件で他の文をオーバーライドしていますか？

Answer 1

エラーごとに異なるIDを使用して（異なるIDで）表示する必要があります。この方法では、互いに競合しません。

Answer 2

代わりの新しい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 3

代わり

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

を使用するのは、単にjQueryのバージョン1.6

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

などに導入さ prop()から確認することができます