Question

I haven’t found a post that actually asks about the moment a radio button is selected.. I’m not checking for value, just if/when someone chooses any button.

Here’s what I have:

function turnSubmitBlue() {
$('.formSubmit').css('backgroundColor','#08aae4');
}

$('input:checkbox').each.change(function(){
if ($(this).attr('checked')) {
checkForThreeRadioBtns()
 };
});

function checkForThreeRadioBtns() {
        if (($('input[name=group1]:checked')) && ($('input[name=group2]:checked')) && ($('input[name=group3]:checked'))) {
            turnSubmitBlue();
            }
}

My thought process was, at page load, nothing is selected and I have to wait until one from each group is selected before indicating, by color change on the submit button, to submit. (I do have validation running if they hit submit before choosing one radio from each group).

Once there are three buttons selected, run the function to change Submit blue, display other content (already working just fine). Once they hit submit, the submit button goes gray and results are displayed.

At this point, there will always be three selected so I just need to then run a function the moment a change occurs (by clicking a different radio button) to change the submit button.

My function, checkForThreeRadioBtns() is supposed to make sure that one of each radio is selected in all three groups and if so, trigger the function to run turnSubmitBlue().

I’ve been trying to get jquery to check the moment a radio button is changed but no luck so far.

Answer 1

Try like below,

$('input:checkbox').change(function(){
   if (this.checked) {
     checkForThreeRadioBtns();
   };
});

Also try changing your if condition like below,

if ($('input[name=group1]:checked').length && 
        $('input[name=group2]:checked').length && 
        $('input[name=group3]:checked').length)

Complete Code:

function turnSubmitBlue() {
    $('.formSubmit').css('backgroundColor','#08aae4');
}

$('input:checkbox').change(function(){
   if (this.checked) {
     checkForThreeRadioBtns();
   };
});

function checkForThreeRadioBtns() {
    if ($('input[name=group1]:checked').length && 
          $('input[name=group2]:checked').length && 
            $('input[name=group3]:checked').length) {
        turnSubmitBlue();
    }
}