How to make the value of an HTML placeholder input checkbox element reflect different values to be stored in an array

Question

So I'm trying to convert this quiz from one that uses radio buttons to, instead, one that uses checkboxes. The quiz has several questions and uses HTML placeholders for the question and selections along with a main array. I want to be able store the selections made into an array. Is there a way to change the value of the HTML input elements so that they reflect the different answer choices they will represent for each new question? See the link - line 3 in the HTML code & line 57 in the JS code...

http://jsfiddle.net/sean1rose/LVmFY/4/

<input type="checkbox" name="choice" value="0" id="choice1">
<label id="answer1"></label>
<br>

^ L3 of HTML: this is serving as a placeholder for selection #1. How do I get value to reflect the actual value when I'm trying to store the selection made into an array?

//Store selections in an array so can print to screen...
function getSelectedChBox(forma) {
    var selectionContainer = [];
    var selectionsMade = document.getElementsByTagName('input');
    var sideVariable = selectionsMade.length;
    for (var i = 0; i < sideVariable; i++) {
        if (selectionsMade[i].type =='checkbox' && selectionsMade[i].checked == true)
            selectionContainer.push(selectionsMade[i].value);
    //as of now, the value will just return 0, or 1, or 2, etc. How can I make it reflect the actual checked box selection so that whatever is selected will be stored into an array - but maintaing  the HTML placeholder template so that I can still use the main question array to hold the questions and selections???
    }
return selectionContainer;
}

^ L50 of JS: I'm trying to run save the selections checked for each question to store the actual values of the selections into an array (so that I can print those sections in the code that follows)

As I'm converting this from a quiz that uses radio buttons to the checkbox format, I'm having trouble storing the values into the array. In the initial version, I was checking the radio button that was selected (checked value) against the current answer (another value).

My question is this:

How do I make the values of the HTML input choices reflect the different answer choices for each of my questions? Is this possible? Or will I need to revamp the entire format?

For example, Question 1 is going to ask:

"Which rappers are you currently listening to?"

There will be 4 different options to select. I want to store those values (the actual names as values) into an array.

Question #2 will ask a similar question. It will use the same array that contains a different question along with different answer choices, but those answers are supposed to have different values. How do I reflect that in the HTML placeholder? Is there something I can put as the value that will reflect the answer choices of the current question? Sorta like the opposite of innerHTML maybe?

Answer 1

What you can try to do instead of getting the value of the checkbox, you can use the checkbox to get the label values like so:

if (selectionsMade[i].type =='checkbox' && selectionsMade[i].checked == true)
         selectionContainer.push(document.getElementById("answer" + (parseInt(selectionsMade[i].value) + 1)).innerHTML);

First of all what I do here is that I increment the value of the checkbox by 1 so that it corresponds with the number in the id of the label, but only first converting the value(string) to an integer.

parseInt(selectionsMade[i].value) + 1

Now this can be appended to the word "answer", which will then mirror the id of the matching label.

Then we get the data inside the label combining these:

document.getElementById("answer" + (parseInt(selectionsMade[i].value) + 1)).innerHTML

The correct values will now appear in the array.

Hope this helps