javascript单选按钮表单

我是javascript新手，正在尝试编写一个简单的脚本，在选中单选按钮时打开一个表单，在单击第二个按钮时打开另一个表单（如果选择了none，则为none）。 我肯定js代码是完全错误的，因为我是js的完全初学者，但我使用了逻辑和一点google来实现这一点，我不知道哪里出了问题

var ele1=document.getElementsByClassName（“form1”）；
var ele2=document.getElementsByClassName（“form2”）；
if（document.getElementById（'button1'）。选中）
{
ele1.style.display=“块”；
}
if（document.getElementById（'button2'）。选中）
{
ele2.style.display=“块”；
}

.form1{
显示：无；
背景色：红色；
宽度：100px；
高度：100px；
}
.表格2{
显示：无；
背景颜色：蓝色；
宽度：100px；
高度：100px；
}

---

根据@Mehdi Brillaud在这里的回答：，您可以使用JQuery来尝试：

红色
绿色
蓝色
表格a
表格乙
表格c

.form{
显示：无；
}
.form.active{
显示：块
}

$（文档）.ready（函数（）{
$（'.form开关'）.on（'change'，function（）{
$（'.form'）.removeClass（'active'）；
var formToShow='.form-'+$（this.data（'id'）；
$（formToShow）.addClass（'active'）；
});
});

这段代码本身并没有错，但它只执行过一次；当页面加载时。相反，您希望在输入更改时切换表单

为此，可见性代码被包装在一个函数中。然后将此函数注册为

元素上的事件处理程序，以便在

发生更改时执行。无论何时通过单击或键盘导航更改所选单选按钮，都会在元素上触发

'input'

事件，然后由函数进行处理

我还做了一些其他更改：

• 仅使用

  id

  s，因为这是少数特定元素的特定功能
• 使用
  元素可以获得更好的语义。所有表单都必须在某个级别包装在
  元素中
• 将

  .java

  更改为

  .js

  ——JavaScript和java（非直观地）不相关
• 更改
  上的

  名称

  ，以更好地描述他们的角色

//form.js
//获取对重要元素的引用。
var elInput1=document.getElementById（'input1'）；
var elInput2=document.getElementById（'input2'）；
var elForm1=document.getElementById（'form1'）；
var elForm2=document.getElementById（'form2'）；
//定义一个事件处理函数。
函数updateFormVisibility（事件）{
var elSelectedInput=event.target；
如果（elSelectedInput.id==='input1'）{
elForm1.style.display='block'；
elForm2.style.display=''；
}否则{
elForm1.style.display=''；
elForm2.style.display='block'；
}
}
//将函数注册为在上发生的任何“输入”事件的处理程序
//两个单选按钮元素。
elInput1.addEventListener（'input'，updateFormVisibility）；
elInput2.addEventListener（'input'，updateFormVisibility）；

这就是你想要的吗

对于现代浏览器：-（不推荐）

表格一
表格二

更新

推荐

<input type="radio" name="role" id="button1" onchange = "Show('form1')">
<input type="radio" name="role" id="button2" onchange = "Show('form2')">
<div class="form1" id ="form1" style="display:none">Form 1
</div>
<div class="form2" id ="form2" style="display:none">Form 2
</div>
<script src="/scripts/form.js"></script>

<script>
var selected = document.getElementById("form1");

function Show(curr_sel) {
    selected.style.display = "none";
    selected = document.getElementById(curr_sel);
    selected.style.display = "block";
}
</script>

表格一
表格二
所选变量=document.getElementById（“form1”）；
功能显示（当前选择）{
selected.style.display=“无”；
选中=document.getElementById（当前选择）；
selected.style.display=“block”；
}

您的代码只执行一次，当它不执行任何操作时，会被选中。这将打开一张表格打开一张表格意味着什么？这是否回答了你的问题@Countour积分我更感兴趣的是从中学习我做错了什么，因此，如果你能告诉我什么是错的，而不是把我和一个已回答的问题联系起来，我将不胜感激。打开一个表单基本上是将其显示为块，因此2个表单被分配给2个按钮，当按下每个按钮时，其各自的表单显示在下面。如果执行一次，它会发生什么变化？“未检查任何内容”是什么意思？@samervjr我的意思是

document.getElementById（'button1'）。checked

返回false，因为代码在页面加载后立即执行（用户没有时间单击它）。单击

button1

或

button2

时，您应该附加一个事件侦听器（以侦听鼠标单击），然后执行您的代码。@Countour Integral gotchu！thx帮助：）JQuery不适用于DOM操作，它是2021

Element.prototype.addEventListener

存在。在这种情况下，这只会使事情变得更复杂。这似乎是有希望的。。只是为了确保你没有修改我的脚本，或者我甚至需要它作为回答。另外，您确定onchange表单显示块可以在html文件中工作吗？我已经更新了我的答案。我先前给出的答案有点冒险。所以，我提供了一个更好的方法。使用第二种方法，您甚至可以添加更多单选按钮而不影响js。请检查一下。试过了，效果很好。。多谢各位

<input type="radio" name="role" id="button1" onchange = "Show('form1')">
<input type="radio" name="role" id="button2" onchange = "Show('form2')">
<div class="form1" id ="form1" style="display:none">Form 1
</div>
<div class="form2" id ="form2" style="display:none">Form 2
</div>
<script src="/scripts/form.js"></script>

<script>
var selected = document.getElementById("form1");

function Show(curr_sel) {
    selected.style.display = "none";
    selected = document.getElementById(curr_sel);
    selected.style.display = "block";
}
</script>