LQ 2022-05-20 16:22 采纳率: 0%
浏览 57

渲染出一个el-radio列表

实现效果图

img


表单中有两个单选框，选择其中一个，跳出一个单选框的列表，求解答

  • 写回答

1条回答 默认 最新

  • ZionHH 2022-05-20 17:05
    关注
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .radio-item {
      display: inline-block;
      position: relative;
    }
    ul {
      display: none;
      position: absolute;
      top: 20px;
      left: 0;
      width: 200px;
      border: 1px solid #ddd;
      background-color: #fff;
    }
    #radio2:checked ~ ul {
      display: block;
    }
  </style>
</head>

<body>
  <div class="radio-item">
    <input id="radio1" type="radio" name="type">
    <label for="radio1">空白课题</label>
  </div>
  <div class="radio-item">
    <input id="radio2" type="radio" name="type">
    <label for="radio2">课题库</label>
    <ul>
      <li>
        <label>
          <input type="radio" name="a">
          课题课题
        </label>
      </li>
      <li>
        <label>
          <input type="radio" name="b">
          课题课题
        </label>
      </li>
      <li>
        <label>
          <input type="radio" name="c">
          课题课题
        </label>
      </li>
    </ul>
  </div>
</body>
</html>
    评论

报告相同问题？

问题事件

  • 创建了问题 5月20日

悬赏问题

  • ¥15 Coze智能助手搭建过程中的问题请教
  • ¥15 12864只亮屏 不显示汉字
  • ¥20 三极管1000倍放大电路
  • ¥15 vscode报错如何解决
  • ¥15 前端vue CryptoJS Aes CBC加密后端java解密
  • ¥15 python随机森林对两个excel表格读取，shap报错
  • ¥15 基于STM32心率血氧监测（OLED显示）相关代码运行成功后烧录成功OLED显示屏不显示的原因是什么
  • ¥100 X轴为分离变量（因子变量），如何控制X轴每个分类变量的长度。
  • ¥30 求给定范围的全体素数p的(p-2)/p的连乘积值
  • ¥15 VFP如何使用阿里TTS实现文字转语音？