Change color of parent div when radio selected
HTML
<div id="radio-example">
<div class="row">
<label class="radio">
<input type="radio" name="group" value="one"><p class="one"> Radio Button One</label></p>
</div>
<div class="row">
<label class="radio">
<input type="radio" name="group" value="two"> <p class="one">Radio Button Three</p></label>
</div>
<div class="row">
<label class="radio">
<input type="radio" name="group" value="three"> <p class="one">Radio Button Three</p></label>
</div>
</div>
CSS
.highlight {
background: green;
}
JavaScript
$(document).ready(function() {
//change colour when radio is selected
$('#radio-example p').change(function() {
// Only remove the class in the specific `box` that contains the radio
$('p.highlight').removeClass('highlight');
$(this).closest('.one').addClass('highlight');
});
});