我现在有套模板，我怎么做成在from里面，有一个单选框，三个单选项，不同的选项底下显示不同的输入框呢？能不能给个最简单的例子，我改下融入到自己的模板里面
<!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>
该回答引用chatgpt:
可以通过JavaScript实现这个功能，监听单选框的选中事件，根据选中的值来显示不同的输入框。
以下是一个简单的例子，假设有一个单选框，选项分别为"选项1"、"选项2"和"选项3"，对应需要显示的输入框分别为"id1"、"id2"和"id3"。
HTML代码：
<form>
<div>
<input type="radio" name="option" value="option1">选项1
<input type="radio" name="option" value="option2">选项2
<input type="radio" name="option" value="option3">选项3
</div>
<div id="input1" style="display:none">
<label for="id1">输入框1：</label>
<input type="text" name="input1" id="id1">
</div>
<div id="input2" style="display:none">
<label for="id2">输入框2：</label>
<input type="text" name="input2" id="id2">
</div>
<div id="input3" style="display:none">
<label for="id3">输入框3：</label>
<input type="text" name="input3" id="id3">
</div>
</form>
JavaScript代码：
const radios = document.getElementsByName("option");
const inputs = [document.getElementById("input1"), document.getElementById("input2"), document.getElementById("input3")];
for (let i = 0; i < radios.length; i++) {
radios[i].addEventListener("click", function() {
// 隐藏所有输入框
for (let j = 0; j < inputs.length; j++) {
inputs[j].style.display = "none";
}
// 显示选中的输入框
inputs[i].style.display = "block";
});
}
解释一下代码，首先通过getElementsByName方法获取所有单选框元素，通过getElementById方法获取所有输入框元素，并存储在一个数组中。然后循环遍历所有单选框元素，为每个单选框添加点击事件监听器。当单选框被点击时，先隐藏所有输入框，然后根据选中的单选框对应的下标显示对应的输入框。
将上述HTML和JavaScript代码复制到你的模板中相应位置即可。注意要将单选框的name属性设置为相同的值，以便实现单选效果。同时还需要调整输入框的id属性和label元素的for属性，以便与JavaScript代码对应。
您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！