2012-07-13 5 views
0

여러 질문을 가진 양식 (동적으로 작성된 설문지)이 있습니다.jQuery로 라디오 버튼 확인

<div class="yesnoradios"> 
    <input type="radio" name="section<%= section %>_question<%= question %>" id="section<%= section %>_question<%= question %>_Y" value="Y" />Yes 
    <input type="radio" name="section<%= section %>_question<%= question %>" id="section<%= section %>_question<%= question %>_N" value="N" />No 
    <input type="radio" name="section<%= section %>_question<%= question %>" id="section<%= section %>_question<%= question %>_NA" value="NA" />N/A 
</div> 

그래서, 내가 가지고 ... 나는 버튼 (http://jqueryui.com/demos/button/#radio)로 라디오 스타일을 jQuery를 사용했지만 나는 약간 여기에 코드를 삭감했습니다 위의 여러 인스턴스. 동적으로 id이라는 이름이 지정됩니다.

나는 클라이언트 측에서 제출시 양식의 유효성을 검사하는 데 어려움을 겪고 있습니다. 내가해야 할 일은 각 질문에 대해 하나의 대답을 선택하는 것입니다. jQuery에 대한 많은 경험이 없으므로 각 질문에 대해 지금까지 한 모든 작업이 반복됩니다.

$('.yesnoradios').each(function(index) { 
    alert($(this).attr("id")); 
}); 

은 내가 영어로 페이지를 볼 때, 그것은 select '대신 내가 잘 확인할 수 있어요 라디오 버튼의 S를 사용하고 말할 거라고 생각했는데, 그 이유는 나는이에 그것을 사용할 수 없습니다 예를 들어 사용자가 질문을 구조화하는 방법에 따라 '예'또는 '아니요'와 같은 언어로 페이지를 보는 것이므로 틱과 십자 기호를 사용하고 있습니다.

미리 도움을 청하십시오.

편집 : 내가 시도한 것은 .children() 함수를 사용하여 하나가 선택되어 있는지 확인하고 양식이 유효하지 않다는 플래그를 설정하지 않았는지 확인하는 것입니다. 그러나 나는 문법을 올바르게 이해할 수 없으며 아직 좋은 코드 샘플을 찾을 수 없었다.

+1

[이 플러그인] (http://elclanrs.github.com/jq-idealforms/)이 도움이 될 수 있습니다. – elclanrs

+0

멋진 찾고 플러그인. 미래의 프로젝트에서이를 확실히 사용할 것입니다. 감사. –

답변

4

는 동적 확인하기 위해 논리를 구축

if($('#question1.optionCls :checked').length() > 0) 
    alert('valid'); //will tell you for question1 whether answer is selected or not 

처럼 참조 할 수처럼 HTML은 ...

해야한다
<div class="yesnoradios"> 
    <input type="radio" name="section<%= section %>_question<%= question %>" id="section<%= section %>_question<%= question %>_Y" value="Y" />Yes 
    <input type="radio" name="section<%= section %>_question<%= question %>" id="section<%= section %>_question<%= question %>_N" value="N" />No 
    <input type="radio" name="section<%= section %>_question<%= question %>" id="section<%= section %>_question<%= question %>_NA" value="NA" />N/A 
</div> 

다음 코드를 사용하여 적어도 하나 이상의 모든 그룹이 선택되어 있는지 확인할 수 있습니다.

$('.yesnoradios input[type=radio]:checked').length 

이렇게하면 확인 된 정확한 그룹 수를 알 수 있습니다. class="yesnoradios"의 더 그것을 확인하지 않고 더 다음 같은가없는 경우 각 yesnoradio의 DIV의 라디오 중 적어도 하나는

if($('.yesnoradios').length == $('.yesnoradios input[type=radio]:checked').length){ 
    //all groups have at least one radio checked 
}else{ 
    //not all are chedked and you can loop your else logic here 
} 

주를 검사 한 : 한 그룹의 귀하의 모든 라디오가 동일한 이름을 가져야한다. .. 그리고 당신이 여기에 unrendered html을 게시했기 때문에 그렇게 할 것이라고 가정합니다.

+0

안녕 LoneWOLFs, 예 그들은 모두 같은 이름을 가지고 있습니다. 코드 스 니펫을 주셔서 감사합니다. –

+0

@GarethLewis가 작동 했습니까? – LoneWOLFs

+0

예. 작동했습니다. 도와 주셔서 대단히 감사합니다. –

3
if ($('input[name='+ radioName +']:checked').length) { 
      // at least one of the radio buttons was checked 
      return true; // allow whatever action would normally happen to continue 
     } 
     else { 
      // no radio button was checked 
      return false; // stop whatever action would normally happen 
     } 
+0

'yesnoradio' 클래스가 모두 유효한지 확인하지 않습니다 ... 모든 div의 루프를 점검해야합니다. – LoneWOLFs

0

보십시오.

radio buttons with class "optionCls" in a div with id question1 
radio buttons with class "optionCls" in a div with id question2 
. 
. 

지금 당신이 아래의 여지가 가정