jQuery EasyUI Dialog 中嵌入 Radio 控件實現選項彈窗

需求

在 EasyUI 的 dialog 組件中放置單選按鈕，實現「同意/駁回」等業務選項彈窗。

完整代碼示例

<div id="dlg" class="easyui-dialog" title="審批操作" 
     data-options="iconCls:'icon-ok',modal:true,closed:true,buttons:'#dlg-buttons'" 
     style="width:400px;height:200px;padding:20px">
  <label><input type="radio" name="opt" value="agree" /> 同意</label>
  <br/><br/>
  <label><input type="radio" name="opt" value="reject" /> 駁回</label>
</div>

<div id="dlg-buttons">
  <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitChoice()">確定</a>
  <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">取消</a>
</div>

<script>
function openDialog() {
  // 打開前重置選項
  $('input[name="opt"]').prop('checked', false);
  $('#dlg').dialog('open');
}

function submitChoice() {
  var val = $('input[name="opt"]:checked').val();
  if (!val) {
    $.messager.alert('提示', '請選擇一項操作');
    return;
  }
  // 業務邏輯：val 為 'agree' 或 'reject'
  console.log('用戶選擇:', val);
  $('#dlg').dialog('close');
}
</script>

關鍵點

• class="easyui-dialog" 配合 data-options 聲明式初始化，無需 JS 實例化。
• Radio 組使用相同 name 實現互斥，value 區分業務值。
• 按鈕區通過 buttons:'#dlg-buttons' 關聯底部工具欄。
• 獲取選中值用 jQuery 選擇器 input[name="opt"]:checked。

進階：動態生成選項

function showDynamicDialog(options) {
  var $dlg = $('#dlg');
  var $container = $dlg.find('.radio-container').empty();
  options.forEach(function(opt) {
    $container.append(
      '<label><input type="radio" name="dynOpt" value="' + opt.value + '" /> ' + opt.text + '</label><br/>'
    );
  });
  $dlg.dialog('open');
}