jquery对话框

jquery对话框 - 想要popup中的radiobutton值输入(jquery dialog - want radiobutton inside popup to value to input)

我想使用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> 
  
 
I want to use jquery dialog to choose radio button and after choose it will .val() to my input but why it did not work? What's wrong with my code
 
I'm not sure that I use onchange event for radio button is correct? 
 
 
 
  
  
$(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> 
  
 

                
最满意答案
                
                    
                        
 
 
  
  
$(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(""); 
 
 
  
  
$(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> 
  
 
 
Is this the desired out come?
 
dont not remove value of radio button on close remove this line $('.shirt_type').val("");
jquery对话框 - 想要popup中的radiobutton值输入(jquery dialog - want radiobutton inside popup to value to input)

                
 我想使用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> 
  
 
I want to use jquery dialog to choose radio button and after choose it will .val() to my input but why it did not work? What's wrong with my code
 
I'm not sure that I use onchange event for radio button is correct? 
 
 
 
  
  
$(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> 
  
 

                
最满意答案
                
                    
                        
 
 
  
  
$(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(""); 
 
 
  
  
$(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> 
  
 
 
Is this the desired out come?
 
dont not remove value of radio button on close remove this line $('.shirt_type').val("");