<!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

If you do a regular refresh (using only F5), a browser will not completely ditch whatever changed on the page but rather keep it on there even though the page is reloaded. If you want it to really clear it off, you must call another javascript function after those elements to clean the mess. However, you could completely clean it up with Ctrl+F5 (reload as if the first visit).