jQuery的单选按钮不起作用

Question

its my TPL file and the radio button is not working properly ,am new to jquery so please help

 {if ($log_in=='yes') && ($url == NULL) }
        <div class="form-group row">
         <div class="col-sm-4 control-label">
            <input  type="radio" name="account_types" value="downline" checked="true">&nbsp;Downline Member</div>
         <div class="col-sm-4 control-label">
            <input  type="radio" name="account_types" value="MGM">&nbsp;MGM Member</div>            
          <input type="hidden" value="{$sponsor_user_name}" name="sponsor_name" id="sponsor_name">
          <input type="hidden" value="{$sponsors_sponsor_name}" id="sponsors_sponsor_name" name="sponsors_sponsor_name">
           </div><br>
        {/if} {else}<input  type="hidden" name="account_type" value="downline">{/if}

and my jquery is

 $('input[type=radio][name=account_types]').on('change', function() {
         alert();
        if (this.value == 'downline') {
            $('#sponsor_user_name').val($('#sponsor_name').val());

            $('#sponsor_user_name').trigger('blur');

        }
        else if (this.value == 'MGM') {
            $('#sponsor_user_name').val($('#sponsors_sponsor_name').val());

            $('#sponsor_user_name').trigger('blur');


        }
    });

Answer 1

I have created a sample Fiddle using your HTML and JavaScript.

Can you please have a look? Because, it's working fine in there.

https://jsfiddle.net/cs3juct7/1/

I have commented out this statement: $('#sponsor_user_name').trigger('blur');

Here is updated HTML. I added a new text field "sponsor_user_name" to test result.

  <div class="form-group row">
     <div class="col-sm-4 control-label">
        <input  type="radio" name="account_types" value="downline" checked="true">&nbsp;Downline Member
     </div>
     <div class="col-sm-4 control-label">
        <input  type="radio" name="account_types" value="MGM">&nbsp;MGM Member
     </div>            
     <input type="hidden" value="sponsor_name_value" name="sponsor_name" id="sponsor_name">
     <input type="hidden" value="sponsors_sponsor_name_value" id="sponsors_sponsor_name" name="sponsors_sponsor_name">
  </div><br>
  <input type="text" id="sponsor_user_name" name="sponsor_user_name" />

Here is updated JavaScript.

$('input[type=radio][name=account_types]').on('change', function() {
     //alert(this.value);
    if (this.value == 'downline') {
        $('#sponsor_user_name').val($('#sponsor_name').val());

        //$('#sponsor_user_name').trigger('blur');

    }
    else if (this.value == 'MGM') {
        $('#sponsor_user_name').val($('#sponsors_sponsor_name').val());

        //$('#sponsor_user_name').trigger('blur');


    }
});

Please also make sure that you have some value in both of the hidden text fields. ie sponsors_sponsor_name & sponsor_name

Thank you.