东燕西飞 2023-04-21 09:09 采纳率: 83.3%
浏览 43
已结题

请教一个关于html的问题

我现在有套模板，我怎么做成在from里面，有一个单选框，三个单选项，不同的选项底下显示不同的输入框呢？能不能给个最简单的例子，我改下融入到自己的模板里面

  • 写回答

3条回答 默认 最新

  • CSDN专家-sinJack 2023-04-21 09:15
    关注
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
 
<form>
 <div>
  <label>
    <input type="radio" name="option" value="option1" checked> Option 1
  </label>
  <label>
    <input type="radio" name="option" value="option2"> Option 2
  </label>
  <label>
    <input type="radio" name="option" value="option3"> Option 3
  </label>
</div>

<div id="input-container">
  <div id="input1">
    <label>
      Input 1:
      <input type="text" name="input1">
    </label>
  </div>
  <div id="input2" style="display:none;">
    <label>
      Input 2:
      <input type="text" name="input2">
    </label>
  </div>
  <div id="input3" style="display:none;">
    <label>
      Input 3:
      <input type="text" name="input3">
    </label>
  </div>
</div>
</form>
</body>

<script>
// 获取单选框和输入框的元素
const option1 = document.querySelector('input[value="option1"]');
const option2 = document.querySelector('input[value="option2"]');
const option3 = document.querySelector('input[value="option3"]');
const input1 = document.querySelector('#input1');
const input2 = document.querySelector('#input2');
const input3 = document.querySelector('#input3');

// 给单选框添加事件监听器
option1.addEventListener('click', function() {
  input1.style.display = 'block';
  input2.style.display = 'none';
  input3.style.display = 'none';
});

option2.addEventListener('click', function() {
  input1.style.display = 'none';
  input2.style.display = 'block';
  input3.style.display = 'none';
});

option3.addEventListener('click', function() {
  input1.style.display = 'none';
  input2.style.display = 'none';
  input3.style.display = 'block';
});
</script>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 4月30日
  • 已采纳回答 4月22日
  • 创建了问题 4月21日

悬赏问题

  • ¥15 preLaunchTask"C/C++: aarch64- apple-darwin22-g++-14 生成活动 文件”已终止，退出代码为-1。
  • ¥18 关于#贝叶斯概率#的问题：这篇文章中利用em算法求出了对数似然值作为概率表参数，然后进行概率表计算，这个概率表是怎样计算的呀
  • ¥20 C#上传XML格式数据
  • ¥15 elementui上传结合oss接口断点续传，现在只差停止上传和继续上传，各大精英看下
  • ¥100 单片机hardfaulr
  • ¥20 手机截图相片分辨率降低一半
  • ¥50 求一段sql语句，遇到小难题了，可以50米解决
  • ¥15 速求，对多种商品的购买力优化问题（用遗传算法、枚举法、粒子群算法、模拟退火算法等方法求解）
  • ¥100 速求！商品购买力最优化问题（用遗传算法求解，给出python代码）
  • ¥15 虚拟机检测，可以是封装好的DLL，可付费