Question

this may be a weird question but I have several radio button groups with labels for each group. when one radio button group is filled i want to highlight the label of the next group to be filled in sequence. So some how when the first radio button group is filled it will show the next group to be filled by highlighting the label of it. Please tell put me on the right direction with CSS and Coding.Thank you

Answer 1

you have to use javascript to do something like this. First you have to create your radiobutton with incremental names like:

<input type="radio" name="group1" value="Milk"> Milk<br>
<input type="radio" name="group1" value="Butter" checked> Butter<br>
<input type="radio" name="group1" value="Cheese"> Cheese
<hr>
<input type="radio" name="group2" value="Water"> Water<br>
<input type="radio" name="group2" value="Beer"> Beer<br>
<input type="radio" name="group2" value="Wine" checked> 

If you use jQuery for example you can listen for changes:

$('input').change(function(element){
    var index = parseInt($(element).attr('name').replace("group", ""));
    $('input[name="group' + (index + i) + '"]').first().focus();
});

This function attach an event listener to each input element when the value changes it takes the current group number from the element that generated the user and put the focus on the first element in the next group. I haven’t tried this but it should work. I’m not sure that input of type radio fires change event but you can use the click event in the same way

Hope it helps