视频上的无线电选项更新和更改视图？

Question

我认为我的问题不是很难 - 但我对此很陌生并且遇到问题找到一个简单的解决方案。

我有一个收集一些项目的表单，以及一个基于这几个项目创建表格的输出页面。例如，其中一个表单选项是“哪条腿受到影响？”你必须选择“左，右，两者”。

我想在视图上创建一个无线电选择选项，以便使用此工具的人不必单击后退按钮来更新这一个字段。构建的表基于这一个选择而更改，因此在不重新提交表单的情况下查看这些更改会很高兴。

如果有人能指出我正确的方向 - 无论是JavaScript还是某种涉及从视图中重新发送表单值的方法 - 我将非常感激。

Answer 1

我相信你所描述的正是用Javascript编写“单页面应用程序”样式的想法 - 用逻辑修改页面而不一定需要发出服务器请求。即，你想做一个“应用程序”。虽然很简单。

我建议你研究的是“事件处理程序”，特别是click handler。

所以，如果你有html看起来像:(从MDN的radio页面被盗）

<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
}

这个想法是你的页面“等待”表单被“点击”（你也可以查看onChange），当它被点击时，会调用一个进一步逻辑的函数。

请参阅here以了解如何获取所选无线电的值。

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

编辑：要注意的一个“问题”是当页面实际加载时你的脚本是否正在运行。如果您的页面异步加载（可疑），这可能是一个问题。以防万一，也看看某种document.ready实现：Pure JavaScript equivalent of jQuery's $.ready() - how to call a function when the page/DOM is ready for it

Answer 2

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

这是一个例子：

const form = document.querySelector('.choice-form');
const display = document.querySelector('.display');

form.querySelectorAll('input[type="radio"]').forEach(input => {
    input.addEventListener('click', () => {
        display.innerHTML = "";
        if (input.id === '1') {
            display.innerHTML = "<span>You selected: <span class='red'>One</span></span>";
        } else if (input.id === '2') {
            display.innerHTML = "<span>You selected: <span class='blue'>Two</span></span>";
        }
    });
});

.red {
  color: red;
}

.blue {
  color: blue;
}

<div>
  <form class='choice-form'>
    <label for='choice'>Make a choice</label>
    <input type='radio' id='1' name='choice'/>
    <label for='1'>One</label>
    <input type='radio' id='2' name='choice'/>
    <label for='2'>Two</label>
  </form>

  <div class='display'>
  </div>
</div>