Getting the values for selected items

Question

I have 2 types of answers: final and draft . And there are two possible predefined types of answers: single choice (radio buttons) and multiple choice (checkboxes) . What I want to do is to have a jQuery function that will look through and the selected answers by concatenating them in a string variable. Then I will work with this variable further.

Here is the snippet of what is done:

  function updateSelectedAnswer(id, answerType) { var result, selAnswers = []; if (answerType=='final'){ var i = 0; $('#PossibleChoices_'+id).children('checkbox').each(function(){ if ($('#finalMultiChoice_'+id).is(":checked") || $('#finalSingleChoice_'+id).is(":checked")) { selAnswers[i] = $(this).find('span').val(); i++; } }); } else { var i = 0; $('#PossibleChoices_'+id).children('checkbox').each(function(){ if ($('#draftMultiChoice_'+id).is(":checked") || $('#draftSingleChoice_'+id).is(":checked")) { selAnswers[i] = $(this).find('span').val(); i++; } }); } result = selAnswers.join('#'); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> FINAL single: <div id="finalAnswers_10"> <div id="PossibleOptions_10" onchange="updateSelectedAnswer(10,'final');"> <label class="checkbox"> <input id="finalSingleChoice_10_1" name="finalSingleChoice_10" type="radio" value="{ class = choice }"> <span>Option 1</span> </label> <br> <label class="checkbox"> <input id="finalSingleChoice_10_2" name="finalSingleChoice_10" type="radio" value="{ class = choice }"> <span>Option 2</span> </label> <br> <label class="checkbox"> <input id="finalSingleChoice_10_3" name="finalSingleChoice_10" type="radio" value="{ class = choice }"> <span>Option 3</span> </label> <br> </div> </div> DRAFT single: <div id="draftAnswers_10"> <div id="PossibleOptions_10" onchange="updateSelectedAnswer(10,'draft');"> <label class="checkbox"> <input id="draftSingleChoice_10_1" name="draftSingleChoice_10" type="radio" value="{ class = choice }"> <span>Option 1</span> </label> <br> <label class="checkbox"> <input id="draftSingleChoice_10_2" name="draftSingleChoice_10" type="radio" value="{ class = choice }"> <span>Option 2</span> </label> <br> <label class="checkbox"> <input id="draftSingleChoice_10_3" name="draftSingleChoice_10" type="radio" value="{ class = choice }"> <span>Option 3</span> </label> <br> </div> </div> <br/> <br/> FINAL multiple: <div id="finalAnswers_11"> <div id="PossibleOptions_11" onchange="updateSelectedAnswer(11,'final');"> <label class="checkbox"> <input id="finalMultipleChoice_11_1" name="finalMultipleChoice_11" type="checkbox" value="{ class = choice }"> <span>Option 1m</span> </label> <br> <label class="checkbox"> <input id="finalMultipleChoice_11_2" name="finalMultipleChoice_11" type="checkbox" value="{ class = choice }"> <span>Option 2m</span> </label> <br> <label class="checkbox"> <input id="finalMultipleChoice_11_3" name="finalMultipleChoice_11" type="checkbox" value="{ class = choice }"> <span>Option 3m</span> </label> <br> </div> </div> DRAFT multiple: <div id="draftAnswers_11"> <div id="PossibleOptions_11" onchange="updateSelectedAnswer(11,'draft');"> <label class="checkbox"> <input id="draftMultipleChoice_11_1" name="draftMultipleChoice_11" type="checkbox" value="{ class = choice }"> <span>Option 1m</span> </label> <br> <label class="checkbox"> <input id="draftMultipleChoice_11_2" name="draftMultipleChoice_11" type="checkbox" value="{ class = choice }"> <span>Option 2m</span> </label> <br> <label class="checkbox"> <input id="draftMultipleChoice_11_3" name="draftMultipleChoice_11" type="checkbox" value="{ class = choice }"> <span>Option 3m</span> </label> <br> </div> </div> 

But, the problem is that the values are somehow always 0. Can someone suggest what is the issue? Or maybe a better way to tackle the problem?

Answer 1

First, ID s must be unique on your DOM and then to select an input of type radio and with some specified name you can use

$("input[type='radio'][name='finalSingleChoice_10']")

Here is a demo of how you can do that

 $(".test").click(function(){ var val1= $("input[type='radio'][name='finalSingleChoice_10']:checked").val(); var val2= $("input[type='radio'][name='draftSingleChoice_10']:checked").val(); console.log(val1+ " "+ val2) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> FINAL single: <div id="finalAnswers_10"> <div id="PossibleOptions_10" > <label class="checkbox"> <input id="finalSingleChoice_101" name="finalSingleChoice_10" type="radio" value="finalSingleChoice_101"> <span>Option 1</span> </label> <br> <label class="checkbox"> <input id="finalSingleChoice_102" name="finalSingleChoice_10" type="radio" value="finalSingleChoice_102"> <span>Option 2</span> </label> <br> <label class="checkbox"> <input id="finalSingleChoice_103" name="finalSingleChoice_10" type="radio" value="finalSingleChoice_103"> <span>Option 3</span> </label> <br> </div> </div> DRAFT single: <div id="draftAnswers_10"> <div id="PossibleOptions_10" > <label class="checkbox"> <input id="draftSingleChoice_101" name="draftSingleChoice_10" type="radio" value="draftSingleChoice_101"> <span>Option 1</span> </label> <br> <label class="checkbox"> <input id="draftSingleChoice_102" name="draftSingleChoice_10" type="radio" value="draftSingleChoice_102"> <span>Option 2</span> </label> <br> <label class="checkbox"> <input id="draftSingleChoice_103" name="draftSingleChoice_10" type="radio" value="draftSingleChoice_103"> <span>Option 3</span> </label> <br> </div> </div> <br/> <br/> <button class="test">Test</button> 

Answer 2

I tried to simplify your code…

• I removed all the id s, and added the class="question" and custom attributes qnum and qtype (question number and type),
• I used $(this) to easily manage the targetting of the elements in the one that has just changed.

… and ended-up with that easy snippet:

 // Using the class 'question' to make it easier, $('.question').on('change', function() { var result = []; // Get the attributes I added in HTML var qnum = $(this).attr('qnum'); var qtype = $(this).attr('qtype'); // Do something for all inputs checked in the element that changed $(this).find("input:checked").each(function(i, elm){ result[i] = $(elm).siblings('span').html(); }); result = result.join('#'); // Output console.clear(); console.log(qtype, qnum, 'updated with:', result); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> FINAL single: <div class="question" qnum="10" qtype="final"> <label class="checkbox"> <input name="finalSingleChoice_10" type="radio" value="{ class = choice }"> <span>Option 1</span> </label> <br> <label class="checkbox"> <input name="finalSingleChoice_10" type="radio" value="{ class = choice }"> <span>Option 2</span> </label> <br> <label class="checkbox"> <input name="finalSingleChoice_10" type="radio" value="{ class = choice }"> <span>Option 3</span> </label> <br> </div> DRAFT single: <div class="question" qnum="10" qtype="draft"> <label class="checkbox"> <input name="draftSingleChoice_10" type="radio" value="{ class = choice }"> <span>Option 1</span> </label> <br> <label class="checkbox"> <input name="draftSingleChoice_10" type="radio" value="{ class = choice }"> <span>Option 2</span> </label> <br> <label class="checkbox"> <input name="draftSingleChoice_10" type="radio" value="{ class = choice }"> <span>Option 3</span> </label> <br> </div> <br/> FINAL multiple: <div class="question" qnum="11" qtype="final"> <label class="checkbox"> <input name="finalMultipleChoice_11" type="checkbox" value="{ class = choice }"> <span>Option 1m</span> </label> <br> <label class="checkbox"> <input name="finalMultipleChoice_11" type="checkbox" value="{ class = choice }"> <span>Option 2m</span> </label> <br> <label class="checkbox"> <input name="finalMultipleChoice_11" type="checkbox" value="{ class = choice }"> <span>Option 3m</span> </label> </div> DRAFT multiple: <div class="question" qnum="11" qtype="draft"> <label class="checkbox"> <input name="draftMultipleChoice_11" type="checkbox" value="{ class = choice }"> <span>Option 1m</span> </label> <br> <label class="checkbox"> <input name="draftMultipleChoice_11" type="checkbox" value="{ class = choice }"> <span>Option 2m</span> </label> <br> <label class="checkbox"> <input name="draftMultipleChoice_11" type="checkbox" value="{ class = choice }"> <span>Option 3m</span> </label> </div> <br><br> 

Hope it helps!