HTML、CSS 和 JavaScript 实现点击单选按钮（Radio）动态改变页面内容的示例

        <input type="radio" name="selector" id="option1" value="1" checked>选项1
        <input type="radio" name="selector" id="option2" value="2">选项2
        <input type="radio" name="selector" id="option3" value="3">选项3 
    <div id="displayArea" >      
        默认内容
    </div>
  <script>
        const radios = document.querySelectorAll('input[name="selector"]');
        const displayArea = document.getElementById('displayArea');
        const contents = {
            '1': '这是选项1 ',
            '2': '项2的内容',
            '3': '这是选项3的内容'
        };
        radios.forEach(radio => {
            radio.addEventListener('change', (e) => {
                const selectedValue = e.target.value;
                displayArea.innerHTML = contents[selectedValue];            
            });
        });
 </script>

 

 

//  http://127.0.0.1:8080/deleteBug?DeleteID=2119   删除一条，并显示 所有数据
procedure TWebModule1.WebModule1WebActionItem12Action(Sender: TObject;
  Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);
var
  S,radioText: string;
   aHTMLtext: TStringList;
  j:integer;
begin
 s:=     Request.QueryFields.Values['DeleteID'];
  if trim(s)<> '' then       begin
     FDQuery1.SQL.Text:='delete from bugtb where BugID  = ' + s  ;
     FDQuery1.ExecSQL;
  end;
  FDQuery1.Open('select *  from bugtb  '  );     //参数为空，返回所有记录
//==============================================================================
  aHTMLtext := TstringList.Create;
aHTMLtext.Add('<style> table{margin:0 auto;border:1px solid #000000;border-collapse:collapse;}th,td{border: 1px solid #000000;}'  // 画 实细线
+'th {background-color: #007bff;   color: #fff;  font-weight: bold;  text-align: center;  padding: 10px;  } '     //表头 样式
+ 'tr:nth-child(odd) { background-color: #f2f2f2;} tr:nth-child(even) {background-color: #ffffff;}'            // 正文 隔行 变色
+' </style>' );

aHTMLtext.Add(' <table border="1"; width=1000px; > ' );
  aHTMLtext.Add(' <tr > ');
  aHTMLtext.Add('<th>选择</th>');
    for j := 1 to FDQuery1.FieldCount do       begin
      aHTMLtext.Add('<th>');
      aHTMLtext.Add(FDQuery1.Fields.FieldByNumber(j).FieldName);   //  列 名
      aHTMLtext.Add('</th>');
    end;
         aHTMLtext.Add('<th>操作栏</th>');
  aHTMLtext.Add(' </tr> ');

  FDQuery1.First;
  while not(FDQuery1.Eof) do      begin
    radioText:=  radioText+ ''''+FDQuery1.Fields.FieldByNumber(1).AsString +''':'''+FDQuery1.Fields.FieldByNumber(2).AsString+''',';     //      '1': '这是选项1 ',
    aHTMLtext.Add(' <tr  > ');
    aHTMLtext.Add('<td>  <input type="radio" name="selector" value="'+  FDQuery1.Fields.FieldByNumber(1).AsString  +'"  > </td>');
    for j := 1 to FDQuery1.FieldCount do        begin
      aHTMLtext.Add('<td>');
      aHTMLtext.Add(FDQuery1.Fields.FieldByNumber(j).AsString);   //  所有 值
      aHTMLtext.Add('</td>');
    end;
          aHTMLtext.Add('<td> <a onclick="return confirm(''确认删除'+FDQuery1.Fields.FieldByNumber(2).AsString +'？'')"    href ="/deleteBug?DeleteID='
                    + FDQuery1.Fields.FieldByNumber(1).AsString +'">删除</a>'
                 //   + '&nbsp<form action="editBug" method="get">  <button type="submit">ddd面</button></form>'
            + '&nbsp<input type="button"   value="编辑" onclick="location.href=''http://127.0.0.1:8080/editBug?aID='
               + FDQuery1.Fields.FieldByNumber(1).AsString + '&b='  + FDQuery1.Fields.FieldByNumber(2).AsString + '&c='  + FDQuery1.Fields.FieldByNumber(3).AsString +'''" />'
                     +'</td>  ');
    aHTMLtext.Add(' </tr> ');
    FDQuery1.Next;
  end;
  aHTMLtext.Add('</table>   ');
  aHTMLtext.Add('<div id="displayArea" >默认内容</div>');
aHTMLtext.add('<script>');
aHTMLtext.add('const radios = document.querySelectorAll(''input[name="selector"]'');');
aHTMLtext.add('const displayArea = document.getElementById(''displayArea'');');
aHTMLtext.add('const contents = {');
aHTMLtext.add(radioText);       //      '1': '这是选项1 ',
aHTMLtext.add('};');
aHTMLtext.add('radios.forEach(radio => {');
aHTMLtext.add('radio.addEventListener(''change'', (e) => {');
aHTMLtext.add('const selectedValue = e.target.value;');
aHTMLtext.add('displayArea.innerHTML = contents[selectedValue];');
aHTMLtext.add('});');
aHTMLtext.add('});');
aHTMLtext.add('</script>');

  S:= aHTMLtext.Text;
  aHTMLtext.Free ;
//--------------------------------------------------------------------------
s:='<input type="button" name="Submit" value="返回到主页" onclick="location.href=''http://127.0.0.1:8080/''" /> ' + s;
   Response.ContentType := 'text/html; charset="UTF-8"';
   Response.Content := S;
  Handled := True;
end;