【发布时间】：2017-01-21 12:44:47
【问题描述】：
（重复？）我已经尝试了几个与此相关的 Stackoverflow 帖子，但我无法让 javaScript 示例正常工作。我想暂时避免使用 jQuery。
我想使用 javascript 创建单选按钮动态显示的信息。在这个例子中，我想编写一个函数来显示这些单选按钮“Answer 1”和“Answer 2”的一些其他值。 例如，我实际上并不想要“答案 1”。目标是让用户点击多项选择答案之一，然后点击提交/保存以自查自己的知识。
我已经通过我更复杂的项目代码了解到，硬编码到 html <form> 部分的提交/保存按钮似乎与单选按钮显示的值没有关联，我设法做到了使用 javaScript 添加 * 在我看来，更改硬编码信息 已经由单选按钮显示 可能可以工作。
当用户点击提交/“保存”按钮时，我不需要参考单选按钮显示的实际答案信息。我只需要知道，在这种情况下，它是选择的第一个答案还是第二个答案。
<html>
<script type="text/javascript">
function OnSubmitForm()
{
if(document.myform.operation[0].checked == true)
{
alert ( "You have selected the first answer" );
}
else
if(document.myform.operation[1].checked == true)
{
alert ( "You have selected the SECOND answer" );
}
}
</script>
<form name="myform" onsubmit="return OnSubmitForm();">
<input type="radio" name="operation" value="1" checked>Answer 1
<input type="radio" name="operation" value="2">Answer 2
<p>
<input type="submit" name="submit" value="save">
</p>
</form>
</html>
（我不知道是否应该包含我尝试过的以下示例）
顺便说一句，这是我尝试过的另一个示例 - 一个帖子，但我无法让这个想法发挥作用。我试图让第一个单选按钮显示“垃圾”而不是最初硬编码的“Answer1”。但是我从发布中借用的代码中有一个错误，我无法解决。
来自 Javascript how to change radio button label text?
<html>
<form name="myform" onsubmit="return OnSubmitForm();">
<input type="radio" id = 'first' name="operation" value="1" checked <label for="alsoFirst"> Answer 1
<input type="radio" id = 'second' name="operation" value="2"<label for="alsoSecond">Answer 2
<p>
<input type="submit" name="submit" value="save">
</p>
</form>
<script type="text/javascript">
document.addEventListener('readystatechange', function() {
// Seems like a GOOD PRACTICE - keeps me from getting type error I was getting
// https://stackoverflow.com/questions/14207922/javascript-error-null-is-not-an-object
if (document.readyState === "complete") {
init();
}
});
function init() {
console.log ("expect to change -Answer 1- displayed by first button to word junk");
// this works
var label = document.getElementById('first').getElementsByTagName('alsoFirst') [0];
// this does not work
label.innerHTML = 'junk';
}
//http://www.javascript-coder.com/html-form/html-form-action.phtml
function OnSubmitForm()
{
if(document.myform.operation[0].checked == true)
{
alert ( "You have selected the first answer" );
}
else
if(document.myform.operation[1].checked == true)
{
alert ( "You have selected the SECOND answer" );
}
if (document.uniqueName.checked == true){
alert ( "You have selected the THIRD answer" );
}
}
/*
<input type="radio" name="sex" id="male" value="male">
<label for="male">Male</label>
</input>
var input = document.getElementById('male');
var label = input.getElementsByTagName('label')[0];
label.innerHTML = 'New Text';
*/
//https://stackoverflow.com/questions/32292962/javascript-how-to-change-radio-button-label-text
</script>
</html>
- 我之前通过插入表格行和连接字符串从我的数组中获取了要显示的值。这有效，并进入表格，但没有绑定到硬编码为原始
<form>的提交/保存按钮。我仍然计划在表格中设置单选应答按钮，但我试图在这里做一个更基本的示例。
【问题讨论】：
-
getElementsByTagName 需要标签名称，而不是“alsoFirst”，应该是 getElementsByTagName("label")
-
我希望没关系，在我的第一个示例中，我没有包括我尝试重置的所有不同字段，使用来自帖子和示例的各种想法。根据我尝试的不同方式，它们都没有奏效！
-
我将其更改为 .... var label = document.getElementById('first').getElementsByTagName('label') [0];.... 但我仍然收到错误消息。谢谢
标签： javascript html forms dynamic radio-button