ทำยังไงให้เมื่อเลือก radio button ใน jquery popup แล้วจะทำการใส่ค่าในinput ครับ

ทำยังไงให้เมื่อเลือก radio button ใน jquery popup แล้วจะทำการใส่ค่าในinput ครับ

ไม่รู้ผิดตรงไหนครับ

โค๊ด:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
    $(function() {

                $( "#MyDialog" ).dialog({
                    autoOpen: false,
                    height: 600,
                    width: 850,
                    modal: true,
                    buttons: {
                        "Save": function() {

                            $('.shirt_type').on('change', function(){
                              if(this.value == 1){
                                $('#sh_type').val("Hello");
                              }
                              if(this.value == 2)
                              {
                                $('#sh_type').val("World");
                              }
                              if(this.value == 3)
                              {
                                $('#sh_type').val("Yes");
                              }
                              if(this.value == 4)
                              {
                                $('#sh_type').val("Wow");
                              }
                            });
                            
                            $( this ).dialog( "close" );
                        },
                        "Cancel": function() {
                            $( this ).dialog( "close" );
                        }
                    },
                    close: function() {
                        $('.shirt_type').val("");
                    }
                });

                $( "#choose_shirt" ).click(function() { $( "#MyDialog" ).dialog( "open" ); });
            });
        </script>
</head>
<body>
    <div id="MyDialog" title="Create Name">
    
    1<input type="radio" class="shirt_type" name="type" value="1" checked>
    
    2<input type="radio" class="shirt_type" name="type" value="2">
       
    3<input type="radio" class="shirt_type"  name="type" value="3">
         
    4<input type="radio" class="shirt_type"  name="type" value="4">
    </div>

   <button id="choose_shirt"> Pop Up </button>

    <table>
        <tr>
            <td>แบบเสื้อ :</td>
            <td><input type="text" id="sh_type" name="shirt_type" /></td>
        </tr>
          
    
    </table>
</body>
</html>

...
buttons: {
"Save": function() {

$( this ).dialog( "close" );
},
"Cancel": function() {
$( this ).dialog( "close" );
}
},
open: function() {
$('.shirt_type').on('change', function(){
if(this.value == 1){
$('#sh_type').val("Hello");
}
if(this.value == 2)
{
$('#sh_type').val("World");
}
if(this.value == 3)
{
$('#sh_type').val("Yes");
}
if(this.value == 4)
{
$('#sh_type').val("Wow");
}
});
},
close: function() {
$('.shirt_type').val("");
}
...