Question

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”);
    });
});