Hi,
New to the forum and have been using JQM a little over the past few months.
I have an issue with Version 1.3.2 with radio buttons and styling. I have a set of radio buttons on my page that the labels and values are populated dynamically. When I first open the page I see everything as expected, however if I later return to the page (and try to populate with new dynamic data) the radio buttons don't have the 'select circle' and appear smaller and "flat".
Here is my fieldset:
<fieldset data-role="controlgroup" id="mpform11">
<input type="radio" name="radio-choice-2" id="checkbox5" class="custom" value="0" />
<label for="checkbox5" id="checkbox5label">Answer 1</label>
<input type="radio" name="radio-choice-2" id="checkbox6" class="custom" value="0" />
<label for="checkbox6" id="checkbox6label">Correct answer</label>
<input type="radio" name="radio-choice-2" id="checkbox7" class="custom" value="0" />
<label for="checkbox7" id="checkbox7label">Answer 3</label>
<a href="#" onclick="quizsubmit()" data-role="button">Confirm</a>
</fieldset>
and here is my function (The question data) is taken from a question object I created.:
function quizsubmit()
{
document.getElementById("checkbox5label").innerHTML = q[1].answer1;
document.getElementById("checkbox6label").innerHTML = q[1].answer2;
document.getElementById("checkbox7label").innerHTML = q[1].answer3;
document.getElementById("checkbox5").value = 1;
document.getElementById("checkbox6").value = 0;
document.getElementById("checkbox7").value = 0;
$("input[name*=radio-choice-2]:checked").each(function()
{
if(this.value == "1")
{
alert("you were correct")
$.mobile.changePage( "#nextquestion", { transition: "slideup"} );
}
else
{
alert("you were wrong")
;
$.mobile.changePage( "#nextquestion", { transition: "slideup"} );
}
});
}
Can anyone help me? it seems like such an easy thing to do but I am lost as to what is happening...
Thanks in advance