jqueryダイアログ - ポップアップ内のラジオボタンで値を入力したい

Question

jqueryダイアログを使用してラジオボタンを選択した後、それを入力すると.val()が入力されますが、なぜ機能しませんでしたか？私のコードで何が問題なのですか？

ラジオボタンがオンになっているとわかりません。

$(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"); }); 
 
});

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<div id="MyDialog" title="Create Name"> 
 
\t  1<input type="radio" class="shirt_type" name="type" value="1" checked> 
 
\t  2<input type="radio" class="shirt_type" name="type" value="2"> 
 
\t  3<input type="radio" class="shirt_type" name="type" value="3"> 
 
\t  4<input type="radio" class="shirt_type" name="type" value="4"> 
 
</div> 
 

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

 
<table> 
 
    <tr> 
 
    <td>Text :</td> 
 
    <td><input type="text" id="sh_type" name="shirt_type" /></td> 
 
    </tr> 
 
</table>

Answer 1

$(function() { 
 
    $("#MyDialog").dialog({ 
 
    autoOpen: false, 
 
    height: 600, 
 
    width: 850, 
 
    modal: true, 
 
    buttons: { 
 
     "Save": function() { 
 
     
 
     var value = $('.shirt_type:checked').val(); 
 
     console.log(value) 
 
     if (value == 1) { 
 
      $('#sh_type').val("Hello"); 
 
     } 
 
     if (value == 2) { 
 
      $('#sh_type').val("World"); 
 
     } 
 
     if (value == 3) { 
 
      $('#sh_type').val("Yes"); 
 
     } 
 
     if (value == 4) { 
 
      $('#sh_type').val("Wow"); 
 
     } 
 

 
     $(this).dialog("close"); 
 
     }, 
 
     "Cancel": function() { 
 
     $(this).dialog("close"); 
 
     } 
 
    }, 
 
    close: function() { 
 
     
 
    } 
 
    }); 
 

 
    $("#choose_shirt").click(function() { 
 
    $("#MyDialog").dialog("open"); 
 
    }); 
 
});

<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/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<div id="MyDialog" title="Create Name"> 
 

 
    1 
 
    <input type="radio" class="shirt_type" name="type" value="1">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>Text :</td> 
 
    <td> 
 
     <input type="text" id="sh_type" name="shirt_type" /> 
 
    </td> 
 
    </tr> 
 

 

 
</table>

これは来るから所望ますか？

この行を削除しないでください。この行を削除してください。$('.shirt_type').val("");