Javascript 视图上更新和更改视图的单选选项？

我认为我的问题不是很难解决，但我对这一点很陌生，在寻找简单的解决方案时遇到了一些问题

我有一个收集一些项目的表单和一个基于这些项目创建表的输出页面。例如，其中一个表单选项是“哪条腿受到影响？”并且您必须选择“左、右、双”

我想在视图上创建一个单选选项，这样使用此工具的人就不必单击“上一步”按钮来更新此字段。生成的表将根据这一选择进行更改，因此如果不重新提交表单就可以看到这些更改，这将是一件好事

---

如果有人能给我指出正确的方向-JavaScript或涉及从视图重新发送表单值的方法-我将非常感激。

我相信您所描述的正是“单页应用程序”的想法使用Javascript进行样式编码是为了使用逻辑修改页面，而不必发出服务器请求。也就是说，你想做一个“应用程序”，尽管它很简单

我建议您研究的是“事件处理程序”，特别是

所以，如果你的html看起来像：（从MDN的页面偷来的）

这个想法是，您的页面正在“等待”表单被“单击”（您也可以查看

onChange

），当它被单击时，会调用一个函数来执行进一步的逻辑

请参阅以了解如何获取选定收音机的值

请参阅，了解如何使用javascript将行插入表中（您可能希望在changeTable函数中执行的操作）

---

编辑：需要注意的一个“问题”是，当页面实际加载时，脚本是否正在运行。如果页面异步加载（可疑），这可能是一个问题。以防万一，还可以查看某种

文档。ready

实现：

我相信您所描述的正是使用Javascript进行“单页应用程序”样式编码的想法——使用逻辑修改页面，而不必发出服务器请求。也就是说，你想做一个“应用程序”，尽管它很简单

我建议您研究的是“事件处理程序”，特别是

所以，如果你的html看起来像：（从MDN的页面偷来的）

这个想法是，您的页面正在“等待”表单被“单击”（您也可以查看

onChange

），当它被单击时，会调用一个函数来执行进一步的逻辑

请参阅以了解如何获取选定收音机的值

请参阅，了解如何使用javascript将行插入表中（您可能希望在changeTable函数中执行的操作）

---

编辑：需要注意的一个“问题”是，当页面实际加载时，脚本是否正在运行。如果页面异步加载（可疑），这可能是一个问题。以防万一，还可以查看某种类型的

文档。ready

实现：

您可以为每个无线电输入添加一个

'click'

事件侦听器，并让回调函数以任何方式修改视图

下面是一个例子：

const form=document.querySelector（'.choice form'）；
const display=document.querySelector（'.display'）；
form.querySelectorAll（'input[type=“radio”]”）。forEach（input=>{
input.addEventListener（'单击'，（）=>{
display.innerHTML=“”；
如果（input.id=='1'）{
display.innerHTML=“您选择的：一个”；
}else if（input.id=='2'）{
display.innerHTML=“您选择了：两个”；
}
});
});
.red{
颜色：红色；
}
蓝先生{
颜色：蓝色；
}

作出选择
一个
两个
您可以为每个无线电输入添加一个事件侦听器，并让回调函数以您想要的任何方式修改视图

下面是一个例子：


const form=document.querySelector（'.choice form'）；
const display=document.querySelector（'.display'）；
form.querySelectorAll（'input[type=“radio”]”）。forEach（input=>{
input.addEventListener（'单击'，（）=>{
display.innerHTML=“”；
如果（input.id=='1'）{
display.innerHTML=“您选择的：一个”；
}else if（input.id=='2'）{
display.innerHTML=“您选择了：两个”；
}
});
});
.red{
颜色：红色；
}
蓝先生{
颜色：蓝色；
}

作出选择
一个
两个
我认为您将使用Ajax发送更新的选择，然后使用来自服务器的数据重新绘制部分页面，因为更新了selection@shakeelosmani嗨，沙克尔。我认为Ajax是我需要使用的。当我更改一个变量时，我需要刷新视图，但随后我需要使用更改后的变量再次运行控制器逻辑。这听起来像是我应该使用Ajax的原因吗？非常感谢。在这种情况下，Ajax正是您想要的。我认为您将使用Ajax发送更新的选择，然后使用来自服务器的数据重新绘制部分页面，因为更新了selection@shakeelosmani嗨，沙克尔。我认为Ajax是我需要使用的。当我更改一个变量时，我需要刷新视图，但随后我需要使用更改后的变量再次运行控制器逻辑。这听起来像是我应该使用Ajax的原因吗？非常感谢。阿贾克斯正是你在这种情况下想要的。谢谢你的贴心帖子。非常确定，只要稍加努力，我就能得到我所需要的。嘿，我最近在看这个，有一个非常简单的例子也可以指导你的过程：另外：谢谢你的贴心帖子。非常确定，只要稍加努力，我就能得到我所需要的。嘿，我最近在看这个，有一个非常简单的例子也可以指导你的过程：还有：
<form id="radio_form">
  <p>Please select your preferred contact method:</p>
  <div>
    <input type="radio" id="contactChoice1"
     name="contact" value="email">
    <label for="contactChoice1">Email</label>

    <input type="radio" id="contactChoice2"
     name="contact" value="phone">
    <label for="contactChoice2">Phone</label>

    <input type="radio" id="contactChoice3"
     name="contact" value="mail">
    <label for="contactChoice3">Mail</label>
  </div>
</form>

var radio = document.getElementById('radio_form');
radio.onclick = changeTable;

function changeTable(e){
  // Do logic here to change table
}