"this" and "parent" giving me fits - sho
Simply put, I want to style the <div> containing the radio button when I click the radio button. I want to tell JQuery, "When a radio button is clicked, add the class .highlight to the parent div."
I've burned three hours trying to get this to work!
Here's my code.
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css" title="text/css" media="all">
<!--
.radio {
padding: 0.5em 0 0.5em 0;
width: 180px;
text-align: center;
}
.hilight {
background-color: red;
}
.container {
}
-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript1.1">
<!--
$(document).ready(function() {
$('.radio').addClass('hilight');
});
$('#nob').click(function() {
$(this).parent().removeClass('hilight');
if($(this).is(':checked')) {
$(this).parent().addClass('hilight');
}
});
//-->
</script>
</head>
<body>
<div class="container">X
<div class="radio"><input name="act01" type="radio" id="nob" value="1"></div>
<div class="radio"><input name="act01" type="radio" id="nob" value="2"></div>
<div class="radio"><input name="act01" type="radio" id="nob" value="3"></div>
X</div>
</body>
</html>