With the checklist script below, how do I make the letters dim to gray while making the strikethrough a bright red? I know it has something to do with placing one class that holds the text within another that holds the strikethrough and the text, but I just can't get it.
And I've heard HTML5 doesn't support this, and only supports <del>. Is there a way to apply the script below to accomodate that as well? Any help on any of this would be awesome. Thanks all!
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
<!--
function toggle(box,theId) {
if(document.getElementById) {
var cell = document.getElementById(theId);
if(box.checked) {
cell.className = "on";
}
else {
cell.className = "off";
}
}
}
// -->
</script>
<style type="text/css">
<!--
.listcheck{
font-size:20px;
font-weight:bold;
padding-left:5px;
}
.off {
color: #000;
}
.on {
color: #bbb;
text-decoration: line-through;
}
-->
</style>
</head>
<body>
<table border="0" cellpadding="5" cellspacing="0">
<tr><td class="off" id="cell1">
<input type="checkbox" onclick="toggle(this,'cell1')"><span class="listcheck">Yada Yada Yada</span>
</td></tr>
<tr><td class="off" id="cell2">
<input type="checkbox" onclick="toggle(this,'cell2')"><span class="listcheck">Yada Yada Yada</span>
</td></tr>
</table>
</body>
</html>
