2016-10-19 210 views
3

我設置了響應由單選按鈕標記處理選擇題調查問卷A,B,C和D.獲取單選按鈕的值設置

我想找出答案,每個通過獲取表單ID和單擊的按鈕值來提出問題,例如,使用第一組單選按鈕的響應可能是1B和第二,2D等等(表單ID腳本已經啓動並運行)。

我需要這與多組單選按鈕

這裏的頁面上工作是HTML:

<form class="toeic_pages" id="1"> 
     <label class="item1"> 
     <input type="radio" value="A" name="toeic"/> 
     <div class="radio-image"></div> 
     </label> 
     <label class="item2"> 
     <input type="radio" value="B" name="toeic"/> 
     <div class="radio-image"></div> 
     </label> 
     <label class="item3"> 
     <input type="radio" value="C" name="toeic"/> 
     <div class="radio-image"></div> 
     </label> 
     <label class="item4"> 
     <input type="radio" value="D" name="toeic"/> 
     <div class="radio-image"></div> 
     </label> 
    </form> 
    ...                 
    <form class="toeic_pages" id="2"> 
     <label class="item1"> 
     <input type="radio" value="A" name="toeic"/> 
     <div class="radio-image"></div> 
     </label> 
     <label class="item2"> 
     <input type="radio" value="B" name="toeic"/> 
     <div class="radio-image"></div> 
     </label> 
     <label class="item3"> 
     <input type="radio" value="C" name="toeic"/> 
     <div class="radio-image"></div> 
     </label> 
     <label class="item4"> 
     <input type="radio" value="D" name="toeic"/> 
     <div class="radio-image"></div> 
     </label> 
    </form> 

不過,雖然我已經能夠用得到檢查單選按鈕值這個:

jQuery('input[name=toeic]').change(function(){ 
     var invar = jQuery('input[name=toeic]:checked').val(); 
     alert(invar); 
    }); 

該腳本只在點擊的第一行按鈕內有效。

爲了說明,如果在要訪問的第一行按鈕中點擊按鈕B,則顯示B(正確)。

但是,如果在另一行中,點擊了按鈕C,則B顯示(不正確)..並且B繼續顯示以用於所有後續的按鈕點擊。我已經檢查了這個SO網頁,但我一直沒有找到解決方案 - 這個問題似乎是多套單選按鈕。

任何幫助將非常讚賞

+1

'$(this).closest('form')。find('input [name = toeic]:checked')。val()' – Tushar

+0

我把這個放在var invar賦值的RHS中,但它不起作用。 – RoyS

回答

0

你可以做這樣的事情:

$(document).ready(function() { 
 
    $("#finish").click(function() { 
 
    var answersList = []; 
 
    //Loop over all questoins 
 
    $(".toeic_pages").each(function() { 
 

 
     var questionId = $(this).attr("id"); 
 
     var answer = $("input[name='toeic']:checked", $(this)).val(); 
 

 
     //if Answer isnt provided do not update the answersList 
 
     if (answer !== undefined) { 
 
     answersList.push({ 
 
      question: questionId, 
 
      answer: answer 
 
     }); 
 
     } 
 
    }); 
 
    console.log(answersList); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="toeic_pages" id="1"> 
 
    <label class="item1"> 
 
    <input type="radio" value="A" name="toeic" /> 
 
    <div class="radio-image"></div> 
 
    </label> 
 
    <label class="item2"> 
 
    <input type="radio" value="B" name="toeic" /> 
 
    <div class="radio-image"></div> 
 
    </label> 
 
    <label class="item3"> 
 
    <input type="radio" value="C" name="toeic" /> 
 
    <div class="radio-image"></div> 
 
    </label> 
 
    <label class="item4"> 
 
    <input type="radio" value="D" name="toeic" /> 
 
    <div class="radio-image"></div> 
 
    </label> 
 
</form> 
 
... 
 
<form class="toeic_pages" id="2"> 
 
    <label class="item1"> 
 
    <input type="radio" value="A" name="toeic" /> 
 
    <div class="radio-image"></div> 
 
    </label> 
 
    <label class="item2"> 
 
    <input type="radio" value="B" name="toeic" /> 
 
    <div class="radio-image"></div> 
 
    </label> 
 
    <label class="item3"> 
 
    <input type="radio" value="C" name="toeic" /> 
 
    <div class="radio-image"></div> 
 
    </label> 
 
    <label class="item4"> 
 
    <input type="radio" value="D" name="toeic" /> 
 
    <div class="radio-image"></div> 
 
    </label> 
 
</form> 
 

 
<button id="finish">Get Answers</button>

+0

感謝您預測問題/答案格式並將其放入代碼。工作很好。我非常感謝你的幫助羅伊 – RoyS

0

我認爲這正是你需要的。

$('#1 input').on('change', function() { 
 
     alert($('#1').attr('id')+$('input[name=radioName]:checked', '#1').val()); 
 
    }); 
 
    $('#2 input').on('change', function() { 
 
     alert($('#2').attr('id')+$('input[name=radioName]:checked', '#2').val()); 
 
    }); 
 
    $('#3 input').on('change', function() { 
 
     alert($('#3').attr('id')+$('input[name=radioName]:checked', '#3').val()); 
 
    }); 
 
    $('#4 input').on('change', function() { 
 
     alert($('#4').attr('id')+$('input[name=radioName]:checked', '#4').val()); 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <form id="1"> 
 
    Question 1 
 
    <br> 
 
    <input type="radio" name="radioName" value="A" /> A <br /> 
 
    <input type="radio" name="radioName" value="B" /> B <br /> 
 
    <input type="radio" name="radioName" value="C" /> C <br /> 
 
    </form> 
 
    <form id="2"> 
 
     Question 2 
 
     <br> 
 
    <input type="radio" name="radioName" value="A" /> A <br /> 
 
    <input type="radio" name="radioName" value="B" /> B <br /> 
 
    <input type="radio" name="radioName" value="C" /> C <br /> 
 
    </form> 
 
    <form id="3"> 
 
     Question 3 
 
     <br> 
 
    <input type="radio" name="radioName" value="A" /> A <br /> 
 
    <input type="radio" name="radioName" value="B" /> B <br /> 
 
    <input type="radio" name="radioName" value="C" /> C <br /> 
 
    </form> 
 
    <form id="4"> 
 
     Question 4 
 
     <br> 
 
    <input type="radio" name="radioName" value="A" /> A <br /> 
 
    <input type="radio" name="radioName" value="B" /> B <br /> 
 
    <input type="radio" name="radioName" value="C" /> C <br /> 
 
    </form>

學分這個答案@Peter j的業主在這個問題上How can I know which radio button is selected via jQuery?

+0

這不適用於我描述頁面上有多組單選按鈕的情況,比如每組10個包含與10個問題對應的4個按鈕。我的確看過@Peter J的回答。謝謝 – RoyS

+0

也許我沒有清楚地表達自己。我在頁面上有多個單選按鈕,上面有幾個表單。我形成了> 1組單選按鈕。每個表格都與一個問題相關聯,單選按鈕是另一種答案 - 一個經典的多項選擇問卷。問題是,如上所述,單擊頁面上任意位置的初始單選按鈕可防止頁面上其他表單中的點擊訪問值,任何幫助都將非常有幫助。我真的被這個問題困擾了。 – RoyS

+0

我編輯它,我認爲通過這樣做可以幫助你,但根據你所說的,你正在尋找差異。回答。那麼,goodluck,並希望你找到最好的答案:) – Sytor