Google tag manager variable for checked radio button does is always undefined

I have created a landing page which has one form (being used twice) where the user inputs his email and choses a value from three radio buttons. I am trying through Google Tag Manager to trigger a custom event when upon successful submission (both fields are required) the value of the user selected radio button is passed to the data layer.

For the form I am using a Wordpress plugin, MC4WP (https://www.mc4wp.com/) so it can integrate with my Mailchimp account. This is my form markup inside the plugin:

<div class="mailchimp-radio animate-top-container">
    <p class="animate-top">
        <label>
            <input class="radio-box" name="MMERGE6" type="radio" value="iPad Pro 10.5" required >
                <span>iPad Pro 10.5</span>
            </label>
            <label>
                <input class="radio-box" name="MMERGE6" type="radio" value="iPad Pro 11" required >
                    <span>iPad Pro 11</span>
                </label>
                <label>
                    <input class="radio-box" name="MMERGE6" type="radio" value="iPad Air" required >
                        <span>iPad Air</span>
                    </label>
                </p>
            </div>

Right below the form markup I have added the following:

<script type="text/javascript">
   jQuery('.radio-box').on('click',function(){
   jQuery(this).attr('checked', 'checked');
   });
   mc4wp.forms.on('started', function(form) {

   var radioName = "MMERGE6";
   var checked = document.querySelector('[name="' + radioName + '"]:checked').value;
   window.dataLayer = window.dataLayer || [];
   window.dataLayer.push({ 'event' : 'Sign-up', 'name' : form.name + ' ID: ' + form.id, 'checked' : checked});
  });

</script> 

The checked variable is the one that is supposed to return the value of the radio button the user selected but always returns undefined. If I set one radio button as preselected, or hardcode a value, the checked variable returns the value.

When testing the tag fires successfully, but the checked variable returns undefined:

{
gtm: {start: 1590774532845, uniqueEventId: 3},
event: 'Sign-up',
name: 'Form #304 ID: 304'
checked: undefined
} 

Inside Tag Manager I have created the event, trigger (custom event named Signu-up) and the checked variable(as a data layer variable named checked).

I have scoured through the internet and tried so many alternatives but to no avail. It seems I am missing something but really can not figure what. Any ideas?