My goal is to trigger an SVG animation when a user selects a specific radio button. The idea is that the value of the radio button should match the ID of the animation. Below is a simplified explanation of the process.
Whenever a user clicks on a radio button, all other radio buttons with the same name should have either a green or blue background: blue if it's selected, and green if it's not.
$('input[type="radio"]').change( function(){
var $scribbleSelectorName = $(this).attr('name');
var $scribbleSelectorInputs = $("input[name=" + $scribbleSelectorName + "]");
$($scribbleSelectorInputs).each(function(){
if ($(this).prop("checked")) {
$(this).css("background","green");
}
else {
$(this).css("background","blue");
}
});
});
You can view a demo here. I've gone through various similar problems, but none of the solutions seem to be effective.