javascript - jquery 对话框 - 希望弹出窗口内的单选按钮能够输入值

Question

我想使用 jquery 对话框选择单选按钮，选择后它将 .val() 添加到我的输入中，但为什么它不起作用？我的代码有什么问题

我不确定我对单选按钮使用 onchange 事件是否正确？

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