SO - 29795219

by Arun P Johny

HTML

<div id="bolton-1" class="bolton">
    <p>bolton-1</p>
    <input type="radio" name="data[ObeBolton][1]" value="1" />
    <input type="radio" name="data[ObeBolton][1]" value="2" />
</div>
<div id="bolton-2" class="bolton">
    <p>bolton-2</p>
    <input type="radio" name="data[ObeBolton][2]" value="3" />
    <input type="radio" name="data[ObeBolton][2]" value="4" />
</div>
<div id="bolton-3" class="bolton">
    <p>bolton-3</p>
    <input type="radio" name="data[ObeBolton][3]" value="5" />
    <input type="radio" name="data[ObeBolton][3]" value="6" />
</div>
<button class="checkBoltons">Check Boltons</button>

CSS

.section-error {
    background-color: rgb(255, 218, 218);
    border: 1px solid red;
}

JavaScript

$(".checkBoltons").click(function () {
    $('.bolton').each(function(){
        var checked = $(this).find(':radio').is(':checked');
        $(this).toggleClass('section-error', !checked);        
    })
})
$('.bolton input:radio').change(function () {
    $(this).closest('.bolton').removeClass('section-error');
});