Syncronizing 'radiogroups' with jQuery

Question

Hi all! Let there be two - identical in terms of options - radio groups A and B. I'm trying to guarantee, via jQuery, that if some option is selected in A, then it's equivalent option is selected in B, and the other way around.

My current approach is this one:

$(document).ready(function() {
    $(".groupA > input").click(function() {
        $(".tutored-radio > input ").click();
     });

    $(".groupB > input").click(function() {
        $(".online-radio > input").click();
    });
});

Note: each radio button is inside a span. I didn't assign the class directly to the input because it's kind of hard to do it in an asp.net run-time generated ListItem.

The obvious problem being that it's an infinite loop: it clicks an element and triggers the click action, which is to click it again, and so on...

What are your suggestions to this? I do have some ideas, but I didn't mention them because I feel they're too "hacky", but will talk about them if it proves necessary.

Thanks in advance!

Answer 1

rather than click try setting the arrtibute tag.

$(document).ready(function() {
    $(".groupA > input").click(function() {
      $(".tutored-radio > input ").attr(”checked”, “checked”);
    });

    $(".groupB > input").click(function() {
      $(".online-radio > input").attr(”checked”, “checked”);
    });
});

Answer 2

When you say equivalent option, what do you mean? I'll assume you mean value

Something like the following will work

$(function() {

     $('span:has(input:radio)').click(function() {             
       var $this = $(this);
       var val = $('input:radio', $this).attr('checked','checked').val();
       var group = $this.hasClass('groupA') ? '.groupB' : '.groupA';       
       $(group + '> input:radio[value="' + val + '"]').attr('checked','checked');            
     });

});

Here's a Working Demo