东燕西飞 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日