대답이없는 질문 (라디오 버튼) JQuery

Question

모든 질문에 답변 여부를 확인하고 "답변 필요합니다"메시지를 표시하고 싶습니다. 각 질문에 YES 및 NO 라디오 버튼이 있습니다.

다음 코드 조각은 라디오 단추 중 하나가 선택되어 있어도 모든 질문에 대해 "답변이 필요합니다"를 배치합니다. 그러나 라디오 버튼이나 해당 질문에 대해 선택하지 않은 경우 메시지를 표시하려고합니다.

$('input:radio').not(':checked').closest('td').next().html("Answer is Required"); 

HTML :

<table border="0"> 
    <tr> 
     <td class="TextBold">1.</td> 
     <td class="TextBold" align="left" valign="middle">Content of Question 1 :</td> 
     <td class="TextBold" align="left" valign="middle"> 
      <table id="ctl00_DefaultContent_ctl01" border="0"> 
       <tr> 
        <td> 
         <input id="ctl00_DefaultContent_ctl01_0" type="radio" name="ctl00$DefaultContent$ctl01" value="Yes" /> 
         <label for="ctl00_DefaultContent_ctl01_0">Yes</label> 
        </td> 
        <td> 
         <input id="ctl00_DefaultContent_ctl01_1" type="radio" name="ctl00$DefaultContent$ctl01" value="No" /> 
         <label for="ctl00_DefaultContent_ctl01_1">No</label> 
        </td> 
       </tr> 
      </table> 
     </td> 
     <td class="TextBold" align="left" valign="middle"></td> 
    </tr> 
</table> 

제발 조언. 사전

BB

Answer 1

오른쪽, 중첩 된 테이블 구조에 대한 몇 가지 수당 후, 중요한 비트가 :

$('table td:has(table)') 
    .has('input:radio:not(:checked)') // Contains unchecked radios 
    .not(':has(input:radio:checked)') // Doesn't contain checked radios 
    .next() 
    .html("Answer is required"); 
; 

데모 : http://jsfiddle.net/euN2Z/2/

(I 오래된 검증 메시지를 취소 할 수있는 데모 라인을 추가했습니다; 이것은 귀하의 요구 사항에 따라 유용 할 수 있습니다.)

이런 식으로 HTML을 사용하는 것에 대해 많은 동의을 표합니다. 당신이 할 수 있다면, 당신은 그것을 단순화하도록 준비해야합니다. 중첩 된 테이블은 특히 DOM을 사용하여 작업 할 때 매우 유감 스럽습니다. 그리고 사소한 변화로 인해 전체가 눈부시게 날아 갈 수 있습니다.

더 많은 테이블이있는 더 큰 페이지의 일부인 것으로 추측됩니다. 예를 들어 질문을 포함하는 테이블을 식별하는 것이 좋습니다. id 속성을 사용하고 그에 따라 선택기를 업데이트하십시오.

Answer 2

에서

덕분에 당신의 HTML의 구조를 모른 채

$('input[type=radio]') 

Answer 3

으로

$('input:radio') 

를 교체 시도는, 명확한 대답을하기 어렵다 하지만이게 작동해야한다고 생각합니다 :

$('td').not(function() { 
    var $radios = $(this).find('input[type="radio"]'); 
    return $radios.length === 0 || $radios.filter(':checked').length > 0; 
}).next().html("Answer is Required"); 

업데이트 : 중첩 테이블을 사용하면 조금 더 까다로울 수 있습니다. 난 당신이 그들 중 하나를 제거 (스타일링을위한 테이블을 사용하여 어쨌든 이동입니다) 또는 선택할 수있는 옵션을 포함하는 테이블 셀 (전체 중첩 테이블)에 클래스를 추가하는 것이 좋습니다 쉽게 그들을 선택할 수 있습니다 .