<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<!---<script src="sisyphus.min.js"></script>--->
<script type="text/javascript" src="https://raw.github.com/simsalabim/sisyphus/master/sisyphus.min.js"></script>
<script>
$(document).ready(function(){
$('#formElem').sisyphus();
});
</script>
<script>
$('#formElem').submit(function() {
localStorage.clear();
});
</script>
<script>
function my()
{
var x= document.getElementById("q1").value;
if( x!='NULL')
{
document.getElementById('d1').style.background='green';
}
}
function my2()
{
var y= document.getElementById("q2").value;
if( y!='NULL')
{
document.getElementById('d2').style.background='green';
}
}
</script>
<script>
function col()
{
if(document.getElementById('q1').checked =='true')
{
document.getElementById('d1').style.background='green';
}
else
{
document.getElementById('d1').style.background='pink';
}
if(document.getElementById('q2').checked =='true')
{
document.getElementById('d2').style.background='green';
}
else
{
document.getElementById('d2').style.background='green';
}
}
</script>
</head>
<body onload="col();">
<form id="formElem">
<table>
<tr> <td>1.b1 </td> </tr>
<tr> <td><input type='radio' id="q1" name="a1" value="a" onclick="my()"> </td> </tr>
<tr> <td><input type='radio' id="q1" name="a1" value="b" onclick="my()"> </td></tr>
<tr> <td><input type='radio' id="q1" name="a1" value="c" onclick="my()"></td> </tr>
<tr> <td><input type='radio' id="q1" name="a1" value="d" onclick="my()"> </td> </tr>
</table>
</div>
<div class="glidecontent">
<table>
<tr> <td>2. c1</td> </tr>
<tr> <td><input type='radio' id="q2" name="a2" value="a" onclick="my2()"></td> </tr>
<tr> <td><input type='radio' id="q2" name="a2" value="b" onclick="my2()"> </td> </tr>
<tr> <td><input type='radio' id="q2" name="a2" value="c" onclick="my2()"></td> </tr>
<tr> <td><input type='radio' id="q2" name="a2" value="d" onclick="my2()"></td> </tr>
</table>
</form>
<h1 id="d1" class="toc">varma</h1> <h4 id="d2" class="toc">hi testing </h4>
</body>
</html>
but wen ever page refreshing done the the selected radio button was displaying as checked but the id="d1" || id="d2" background becoming pink.help me guys.but i want to display it's background as green once the radio button was checked up to session ends.thank u all