Change DIV Background When Nearest Radio Checked

Question

I have this already to make selecting the radio box easier

$("div.column43").click(function () {
$(this).find('input:radio').attr('checked', true);
});

I want the background/border of the div the change when radio inside it is selected.

I can get the border to change on Hover no problem but I want it to stay changed until it is deselected.

This is the format 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>

This is 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;
}

For the life of me I cant see how to keep the border effect on when the radio is selected and the mouse is moved away.

If someone could let me know what I need to do using the actual classes that would be amazing

Thanks

Answer 1

If you can put the labels after the radio buttons you can do this purely with CSS:

input[type="radio"]:checked+label {
    background:#faa;
    border:1px solid red;
}

jsFiddle example

If not, using jQuery you can do it like this:

$("div.column43").click(function () {
    $(this).parent('div.row43').find('label').removeClass('highlight');
    $(this).find('input:radio').attr('checked', true);
    $(this).find('label').addClass('highlight');
});

jsFiddle example