JQuery와 : 숨겨진 값으로 라디오 버튼 값을 비교

Question

I HTML로 구현 된 다음의 리 커트 척도 (끝의 숨겨진 필드에주의)이 있습니다

<ul class="likert"> 
    <li class="likert">Not Empathetic<input type="radio" value="1" /> 
    <li class="likert"><input type="radio" value="2" /> 
    <li class="likert"><input type="radio" value="3" /> 
    <li class="likert"><input type="radio" value="4" /> 
    <li class="likert">Very Empathetic<input type="radio" value="5" /> 
</ul> 
<input class="answer-key" type="hidden" value="5"/> 

내가 선택한 라디오 버튼의 값을 비교하는 것을 시도하고있다 숨겨진 필드에 값을 저장하십시오. JQuery와에

, 나는 다음과 같은 한 :

는 는

어떻게 숨겨진 입력의 값에 액세스 할 수

$(document).ready(function(){ 

//click handler 
$('input[type=radio]').click(function(){ 

    var value = $(this).val(); 

    //DOESN'T WORK 
    var answer = $(this).parent().siblings('.answer-key').val()); 

    compute_score(answer,value); 

    }); 

}); 

? 이 페이지에는 여러 개의 숨겨진 답변이 있으므로이 특정 리 커트 척도에 대한 숨겨진 answer의 가치를 알아야합니다. 나는 숨겨진 대답을 다른 위치 (아마도 <ul> 안에 있습니까?)로 이동시키는 것에 대해 열려 있습니다.

Answer 1

.parent은 충분하지 않습니다 (<li> 만 선택). 당신이 원하는 것 같아요 .closest('ul').siblings ...

Answer 2

여기에 올바른 요소가 없습니다. ul이 아닌 li 요소의 siblings('.answer-key')을 확인하십시오.

$('input[type=radio]').click(function(){ 
    var value = $(this).val(); 

    // $(this)         equals <input[type=radio]> 
    // $(this).parent()       equals <li class="likert"> 
    // $(this).parent().siblings('.answer-key') equals nothing! 
    var answer = $(this).parent().siblings('.answer-key').val(); 
    compute_score(answer,value); 
}); 

당신은 ul를 얻기 위해, $(this).parent().parent()해야합니다. 그런 다음 형제 자매를 확인할 수 있습니다. 그래서 그것을 수행해야합니다

var answer = $(this).parent().parent().siblings('.answer-key').val(); 

Answer 3

는이

당신은 UL 첫째로 얻을 필요가

var answer = $(this).closest('ul').next('.answer-key').val(); 

.. 그런 다음 형제에게 부모 것 여기

Answer 4

를 얻을 수 .next를 사용하십시오 li 요소 선택

$(this).parent().siblings('.answer-key').val()); 

가장 가까운 ("ul") 형제로 변경하여 ul에 해당하는 숨겨진 요소를 가져옵니다.

감사

Answer 5

HTML

<ul class="likert"> 
    <li class="likert">Not Empathetic <input name='radio_check' type="radio" value="1" /> 
    <li class="likert"><input type="radio" name='radio_check' value="2" /> 
    <li class="likert"><input type="radio" name='radio_check' value="3" /> 
    <li class="likert"><input type="radio" name='radio_check' value="4" /> 
    <li class="likert">Very Empathetic <input name='radio_check' type="radio" value="5" /> 
</ul> 
<input class="answer-key" type="hidden" value="5"/> 

자바 스크립트

이 가 이

그냥이 함께 확인 않다면 당신은 선택의 일부로서 이름을 사용하고 확인하려는 경우에 //

jQuery(document).ready(function($){ 

//click handler 
$('input[type=radio]').on('click',function(event){ 

    var value = $(this).val(); 

//call your javascript function 
    compute_score(answer, $('input[type="hidden"].answer-key').val()); 
event.preventDefault(); 
    }); 
}); 

: 예를 들어 확인 ... 라디오 옵션에 이름을 추가했습니다. 하나만 선택할 수 있기 때문에 동일한 이름을 가질 수 있습니다.