表单在提交时选择第一个单选按钮答案

【问题标题】：Form selecting first radio button on submit表单在提交时选择第一个单选按钮
【发布时间】：2017-10-25 17:13:13
【问题描述】：

我有一个 HTML 程序（请原谅凌乱的代码），它旨在在特定时间打开一个 Google 教室窗口和另一个窗口（如果用户愿意）。提交第一次运行form时，无论您选择什么，当您按提交时都会转到第一个选项。

<form onsubmit="return firstrunFunction2();" class="firstrunfalse" id="Pdls">
  <p>First run:
    <br>To setup, please type the class code for each classroom.
    <br>EX: <i>https://classroom.google.com/u/0/c/<strong> NzA2MDk5NzM5MVpa</strong></i>
    <br>Please <strong>only</strong> put the end code or else the application will fail to run properly.</p>
  <br>
  <input type="text" id="pd1" placeholder="Period 1">
  <br>
  <input type="radio" name="period1" id="period1typemath" value="Math">Math
  <br>
  <input type="radio" name="period1" id="period1typescience" value="Science">Science
  <br>
  <input type="radio" name="period1" id="period1typeother" value="Other">Other
  <br>
  <input type="radio" name="period1" id="period1typecustom" value="Custom">Custom URL:
  <br>
  <input type="textbox" id="period1customurl" placeholder="Custom Url">
  <br>
  <br>
  <input type="text" id="pd2" placeholder="Period 2">
  <br>
  <input type="radio" name="period2" id="period2typemath" value="Math">Math
  <br>
  <input type="radio" name="period2" id="period2typescience" value="Science">Science
  <br>
  <input type="radio" name="period2" id="period2typeother" value="Other">Other
  <br>
  <input type="radio" name="period2" id="period2typecustom" value="Custom">Custom URL:
  <br>
  <input type="textbox" id="period2customurl" placeholder="Custom Url">
  <br>
  <br>
  <input type="text" id="pd3" placeholder="Period 3">
  <br>
  <input type="radio" name="period3" id="period3typemath" value="Math">Math
  <br>
  <input type="radio" name="period3" id="period3typescience" value="Science">Science
  <br>
  <input type="radio" name="period3" id="period3typeother" value="Other">Other
  <br>
  <input type="radio" name="period3" id="period3typecustom" value="Custom">Custom URL:
  <br>
  <input type="textbox" id="period3customurl" placeholder="Custom Url">
  <br>
  <br>
  <input type="text" id="pd4" placeholder="Period 4">
  <br>
  <input type="radio" name="period4" id="period4typemath" value="Math">Math
  <br>
  <input type="radio" name="period4" id="period4typescience" value="Science">Science
  <br>
  <input type="radio" name="period4" id="period4typeother" value="Other">Other
  <br>
  <input type="radio" name="period4" id="period4typecustom" value="Custom">Custom URL:
  <br>
  <input type="textbox" id="period4customurl" placeholder="Custom Url">
  <br>
  <br>
  <input type="text" id="pd5" placeholder="Period 5">
  <br>
  <input type="radio" name="period5" id="period5typemath" value="Math">Math
  <br>
  <input type="radio" name="period5" id="period5typescience" value="Science">Science
  <br>
  <input type="radio" name="period5" id="period5typeother" value="Other">Other
  <br>
  <input type="radio" name="period5" id="period5typecustom" value="Custom">Custom URL:
  <br>
  <input type="textbox" id="period5customurl" placeholder="Custom Url">
  <br>
  <br>
  <input type="text" id="pd6" placeholder="Period 6">
  <br>
  <input type="radio" name="period6" id="period6typemath" value="Math">Math
  <br>
  <input type="radio" name="period6" id="period6typescience" value="Science">Science
  <br>
  <input type="radio" name="period6" id="period6typeother" value="Other">Other
  <br>
  <input type="radio" name="period6" id="period6typecustom" value="Custom">Custom URL:
  <br>
  <input type="textbox" id="period6customurl" placeholder="Custom Url">
  <br>
  <br>
  <input type="text" id="pd7" placeholder="Period 7">
  <br>
  <input type="radio" name="period7" id="period7typemath" value="Math">Math
  <br>
  <input type="radio" name="period7" id="period7typescience" value="Science">Science
  <br>
  <input type="radio" name="period7" id="period7typeother" value="Other">Other
  <br>
  <input type="radio" name="period7" id="period7typecustom" value="Custom">Custom URL:
  <br>
  <input type="textbox" id="period7customurl" placeholder="Custom Url">
  <br>
  <br>
  <input type="text" id="pd8" placeholder="Period 8">
  <br>
  <input type="radio" name="period8" id="period8typemath" value="Math">Math
  <br>
  <input type="radio" name="period8" id="period8typescience" value="Science">Science
  <br>
  <input type="radio" name="period8" id="period8typeother" value="Other">Other
  <br>
  <input type="radio" name="period8" id="period8typecustom" value="Custom">Custom URL:
  <br>
  <input type="textbox" id="period8customurl" placeholder="Custom Url">
  <br>
  <br>
  <input type="text" id="pd9" placeholder="Period 9">
  <br>
  <input type="radio" name="period9" id="period9typemath" value="Math">Math
  <br>
  <input type="radio" name="period9" id="period9typescience" value="Science">Science
  <br>
  <input type="radio" name="period9" id="period9typeother" value="Other">Other
  <br>
  <input type="radio" name="period9" id="period9typecustom" value="Custom">Custom URL:
  <br>
  <input type="textbox" id="period9customurl" placeholder="Custom Url">
  <br>
  <br>
  <input type="text" id="pd10" placeholder="Period 10">
  <br>
  <input type="radio" name="period10" id="period10typemath" value="Math">Algebra
  <br>
  <input type="radio" name="period10" id="period10typeother" value="Other">Academic Advisor
  <br>
  <input type="radio" name="period10" id="period10typecustom" value="Custom">Custom URL:
  <br>
  <input type="textbox" id="period10customurl" placeholder="Custom Url">
  <br>
  <br>
  <input type="submit" id="submitFirstrun">
</form>

这是pastebin。

【问题讨论】：

表单和提交按钮的 HTML 在哪里？
请创建一个简化的问题示例，没有人有时间去检查将近 600 行代码
if (document.getElementById('period1typescience').checked = true) { 你可能想关注这样的行
@Huangism ，此代码运行正常。唯一的问题是，当您按下提交按钮时，选择会变为上方的单选按钮，即数学。
@NathanMetzger 您的 js 错误，只需将其与您的其他真/假检查进行比较，请注意其他使用 == 而不是 =？

标签： javascript html forms

【解决方案1】：

在您的代码中

if (document.getElementById('period1typescience').checked = true) {
    document.cookie = "period1type=science; expires=Mon, 18 Jun 2018 12:00:00 GMT-0400 EDT;";
} else if (document.getElementById('period1typemath').checked = true) {
    document.cookie = "period1type=math; expires=Mon, 18 Jun 2018 12:00:00 GMT-0400 EDT;";
}
....

document.getElementById('period1typescience').checked = true 总是返回真。你想检查布尔值，你可以使用

document.getElementById('period1typescience').checked == true

或

document.getElementById('period1typescience').checked === true

甚至更简单

document.getElementById('period1typescience').checked

.checked 已经返回一个布尔值，因此您无需检查它是否等于真。由于该语句返回 true，因此始终设置第一个条件。

这是几乎所有值检查的问题，而不仅仅是第一个。

【讨论】：

【解决方案2】：

应该这样做。回答“提交时选择第一个单选按钮的表单”问题。

    // All Browsers
    var inputs = document.getElementsByTagName('input');
    for (var i of inputs)
        if(i.type.toLowerCase() === 'radio'){
            console.log(i);
            break;
        }

    // New Browsers
    console.log(document.querySelectorAll('input[type=radio]')[0]);

【讨论】：