jQuery How to auto sync groups of radio buttons

Question

I have the following web form markup:

<input type="radio" value="1" name="option[1]" class="abc">
<input type="radio" value="2" name="option[1]" class="def">
<input type="radio" value="3" name="option[1]" class="ghi">
<input type="radio" value="1" name="option[2]" class="abc">
<input type="radio" value="2" name="option[2]" class="def">
<input type="radio" value="3" name="option[2]" class="ghi">
<input type="radio" value="1" name="option[3]" class="abc">
<input type="radio" value="2" name="option[3]" class="def">
<input type="radio" value="3" name="option[3]" class="ghi">

How can I set the option[2] and option[3] buttons to get the same selection made for option[1]?

Can it be done with some sort of jQuery assignment or do I need to create my own set of if/then statements?

Here is my if/then statements (it works, just looking to make it a bit more concise):

if ( $('input.abc[name="option\\[1\\]"]').prop('checked') == true) {
  $('input.abc[name="option\\[2\\]"]').prop('checked', true);
  $('input.abc[name="option\\[3\\]"]').prop('checked', true);
}
else if ( $('input.def[name="option\\[1\\]"]').prop('checked') == true) {
  $('input.def[name="option\\[2\\]"]').prop('checked', true);
  $('input.def[name="option\\[3\\]"]').prop('checked', true);
}
else if ( $('input.ghi[name="option\\[1\\]"]').prop('checked') == true) {
  $('input.ghi[name="option\\[2\\]"]').prop('checked', true);
  $('input.ghi[name="option\\[3\\]"]').prop('checked', true);
}

Answer 1

Check this fiddle. I have added a solution.

1. Select the first set of inputs with option1, bind event on it.
2. Get selected input element's value.
3. Select the inputs with the common value and assign them as checked.

http://jsfiddle.net/n8CdM/751/

    $('input[name="option1"]').on('click', function () {
       var selection = $(this).val();
       $('input[value="' + selection + '"]').attr('checked', true);
    });

Answer 2

$('input[name="option[1]"]').change(function () {
    $('input[name="option[2]"],input[name="option[3]"]').val([$(this).val()])
})

jsFiddle example

Answer 3

<input type="radio" value="1" name="option[1]" class="class1">
<input type="radio" value="2" name="option[1]" class="class2">
<input type="radio" value="3" name="option[1]" class="class3">
<input type="radio" value="1" name="option[2]" class="class1">
<input type="radio" value="2" name="option[2]" class="class2">
<input type="radio" value="3" name="option[2]" class="class3">
<input type="radio" value="1" name="option[3]" class="class1">
<input type="radio" value="2" name="option[3]" class="class2">
<input type="radio" value="3" name="option[3]" class="class3">

add classes to inputs and try jquery code:

$("input[type=radio]").change(function() {
   $("."+$(this).attr('class')).attr('selected', 'selected');
});

for example ;)

Answer 4

you could add an attribute to the html

<input type="radio" value="1" name="option[2]" checked="checked" >

Or you could add it with jQuery

$('input[name="option[2]"]').attr('checked','checked');