Is there a way to make selecting the radio box easier with this code I have?
$("div.column43").click(function () {
$(this).find('input:radio').attr('checked', true);
});
I'm trying to figure out how to change the background and border of the div when the radio inside it is selected.
Although I can get the border to change on Hover, I want it to stay changed until it is deselected.
This is an example of the structure on the page:
<div class="row43">
<div class="column43">
<input id="box21" type="radio" name="box21"
value="" checked> <label for="box21">Any/All</label>
</div>
<div class="column43">
<label for="box22">1.0</label><input
id="box22" type="radio" name="box21" value="1.0">
</div>
<div class="column43">
<label for="box23">1.1</label><input
id="box23" type="radio" name="box21" value="1.1">
</div></div>
Here's the CSS for the hover effects:
div.row43:hover > div {
opacity: 0.5;
}
div.row43:hover > div.column43:hover {
opacity: 1.0;
}
div.row43:hover {
border-color: #0099ff;
}
div.column43:hover {
opacity: 0.5;
border-color: #0099ff;
}
I'm struggling to keep the border effect on when the radio is selected and the mouse is moved away. Any suggestions would be greatly appreciated!
If anyone could provide guidance using the actual classes, that would be amazing. Thank you!