JavaScript排班POC单选按钮输出异常求助

看起来你在开发排班系统时遇到了单选按钮无法正确输出选中值的问题，我帮你梳理下代码里的几个关键问题和修复方案：

核心问题分析 #

1. 错误的单选按钮值获取方式
   你在表单onsubmit事件里直接用this['1'].value这种方式取值，但当多个单选按钮共享同一个name时，this['1']实际上是一个元素集合（NodeList），而不是单个元素。直接取.value只会拿到集合中第一个元素的值，和用户实际选中的选项无关，这是导致输出错误的根本原因。

2. HTML代码截断导致解析异常
   你提供的代码末尾明显不完整，比如第8号日期的单选按钮代码写到一半就断了：

   <input name="8" value="off," checked="chec
   

   这种不完整的HTML会让浏览器无法正确解析DOM元素，进一步导致单选按钮的选中状态无法被正确识别。

3. 数字作为name属性的潜在风险
   虽然浏览器允许数字作为表单元素的name，但这不是最佳实践，可能在某些场景下引发解析或取值的异常，建议改用更清晰的命名（比如day1、day2）。

修复方案 #

1. 补全并修正HTML代码 #

先把截断的代码补全，确保所有单选按钮的标签都闭合，属性完整。比如第8号日期的代码应该修正为：

<td>
  <div style="text-align: center;">8th</div>
  <input name="day8" value="3-9," type="radio">3-9<br>
  <input name="day8" value="5-9," type="radio">5-9<br>
  <input name="day8" value="off," checked="checked" type="radio">Off<br>
</td>

同时把所有日期的name属性从数字改成day1、day2...day31，增强代码可读性和稳定性。

2. 添加获取单选按钮选中值的工具函数 #

在JS中新增一个函数，专门用来获取指定name的单选按钮组的选中值：

function getSelectedRadioValue(name) {
  const radios = document.getElementsByName(name);
  for (let radio of radios) {
    if (radio.checked) {
      return radio.value;
    }
  }
  return "off,"; // 默认返回off，和你的初始选中状态一致
}

3. 修改表单提交逻辑 #

把原来onsubmit里直接拼接value的逻辑，改成调用上面的函数来获取每个日期的选中值：

<form name="addtext" onsubmit="download(this['uid'].value, getSelectedRadioValue('day1') + getSelectedRadioValue('day2') + getSelectedRadioValue('day3') + ... + getSelectedRadioValue('day31'))">

（这里省略了中间的day4到day30，你可以按顺序补全）

4. 优化日期字段的设置 #

你的my_curr_date函数可以稍微优化下，确保日期格式的一致性（比如个位数日期补零）：

function my_curr_date() {
  const currentDate = new Date();
  const day = String(currentDate.getDate()).padStart(2, '0');
  const month = String(currentDate.getMonth() + 1).padStart(2, '0');
  const year = currentDate.getFullYear();
  const my_date = `${month}-${day}-${year}`;
  document.getElementById("dateField").value = my_date;
}

完整修复后的代码示例 #

这里给出部分关键修改后的代码片段，你可以参考扩展到整个页面：

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"> <!-- 建议改成utf-8编码，避免中文乱码 -->
  <script language="Javascript">
    function download(filename, text) {
      var pom = document.createElement('a');
      pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
      pom.setAttribute('download', filename);
      pom.style.display = 'none';
      document.body.appendChild(pom);
      pom.click();
      document.body.removeChild(pom);
    }

    function addTextTXT() {
      document.addtext.name.value = document.addtext.name.value + ".txt"
    }

    function my_curr_date() {
      const currentDate = new Date();
      const day = String(currentDate.getDate()).padStart(2, '0');
      const month = String(currentDate.getMonth() + 1).padStart(2, '0');
      const year = currentDate.getFullYear();
      const my_date = `${month}-${day}-${year}`;
      document.getElementById("dateField").value = my_date;
    }

    // 新增的工具函数
    function getSelectedRadioValue(name) {
      const radios = document.getElementsByName(name);
      for (let radio of radios) {
        if (radio.checked) {
          return radio.value;
        }
      }
      return "off,";
    }
  </script>
</head>
<body onload="return my_curr_date();">
  <div style="text-align: center;">Today's Date is: &nbsp;&nbsp;&nbsp; <input name="dateField" id="dateField" value="" type="text"></div>
  <form name="addtext" onsubmit="download(this['uid'].value, getSelectedRadioValue('day1') + getSelectedRadioValue('day2') + getSelectedRadioValue('day3') + getSelectedRadioValue('day4') + getSelectedRadioValue('day5') + getSelectedRadioValue('day6') + getSelectedRadioValue('day7') + getSelectedRadioValue('day8') + getSelectedRadioValue('day9') + getSelectedRadioValue('day10') + getSelectedRadioValue('day11') + getSelectedRadioValue('day12') + getSelectedRadioValue('day13') + getSelectedRadioValue('day14') + getSelectedRadioValue('day15') + getSelectedRadioValue('day16') + getSelectedRadioValue('day17') + getSelectedRadioValue('day18') + getSelectedRadioValue('day19') + getSelectedRadioValue('day20') + getSelectedRadioValue('day21') + getSelectedRadioValue('day22') + getSelectedRadioValue('day23') + getSelectedRadioValue('day24') + getSelectedRadioValue('day25') + getSelectedRadioValue('day26') + getSelectedRadioValue('day27') + getSelectedRadioValue('day28') + getSelectedRadioValue('day29') + getSelectedRadioValue('day30') + getSelectedRadioValue('day31'))">
    <p><br></p>
    <table style="width: 707px; height: 550px; text-align: left; margin-left: auto; margin-right: auto;" border="1">
      <tbody>
        <tr>
          <td><span style="font-family: Arial;">Sunday</span></td>
          <td>Monday</td>
          <td>Tuesday</td>
          <td>Wednesday</td>
          <td>Thursday</td>
          <td style="height: 27.5px;">Friday</td>
          <td>Saturday</td>
        </tr>
        <tr>
          <td style="width: 84.55px;"><br></td>
          <td style="width: 82.7px;"><br></td>
          <td style="width: 91.483px;"><br></td>
          <td style="width: 103.05px;"><br></td>
          <td style="width: 97.9px;"><br></td>
          <td style="width: 101.267px;">
            <div style="text-align: center;">1st</div>
            <input name="day1" value="3-9," id="day1-1" type="radio">3-9<br>
            <input name="day1" value="5-9," id="day1-2" type="radio">5-9<br>
            <input name="day1" value="off," checked="checked" id="day1-3" type="radio">Off</td>
          <td style="width: 100.567px;">
            <div style="text-align: center;">2nd</div>
            <input name="day2" value="10-5," id="day2-1" type="radio">10-5<br>
            <br>
            <input name="day2" value="off," checked="checked" id="day2-2" type="radio">Off</td>
        </tr>
        <!-- 其他日期的行按同样的方式修改name属性 -->
      </tbody>
    </table>
    <!-- 记得添加表单的提交按钮和uid输入框，你原来的代码里没显示全 -->
    <input type="text" name="uid" placeholder="Enter filename">
    <button type="submit">Download Schedule</button>
  </form>
</body>
</html>

额外提示 #

• 注意给每个单选按钮设置唯一的id属性（比如day1-1、day1-2），虽然不是必须，但有助于调试和后续扩展。
• 把页面编码改成utf-8，避免出现字符编码问题。
• 如果后续需要处理更多日期或班次，建议用循环来生成表单元素和取值，减少重复代码。

内容的提问来源于stack exchange，提问作者Stephen Brock