Radio按钮未选中时返回null，JavaScript交互异常求助

问题描述 #

开发的表单页面需实现每列单选按钮互斥+跨列值唯一（即所有列的选中值不重复，切换某列选中值时，原持有该值的列自动切换为被替换的值），但存在以下问题：

• 首次操作单选按钮时触发「无法设置null对象属性」错误
• 初始状态为第n列选中第n行，但切换第1列第2行时，第2列第1行无法自动切换，必须手动点击过所有按钮后逻辑才生效

错误根源 #

1. 未校验DOM元素存在性：直接通过ID获取元素并设置checked属性，当ID拼接错误或元素不存在时返回null，触发报错
2. 变量未声明：oldNum未用声明关键字定义，造成全局变量污染
3. 初始状态未同步：页面加载后未校验DOM选中状态与currentValues数组的一致性，导致初始逻辑与实际DOM状态偏差
4. 未取消原有选中项：仅设置新选中项，未取消列内其他单选按钮的选中状态，可能引发状态冲突

修复方案 #

修复后的JavaScript代码 #

// 存储各列当前选中的数值，索引对应列号-1
let currentValues = [1, 2, 3, 4, 5];

// 页面加载完成后，同步DOM状态与currentValues数组
document.addEventListener('DOMContentLoaded', function() {
  syncDOMWithCurrentValues();
});

/**
 * 处理单选按钮点击事件
 * @param {string/number} place - 列号
 * @param {string/number} value - 选中的数值
 */
function checkVote(place, value) {
  // 转换为数字类型，避免字符串比较异常
  const placeNum = parseInt(place);
  const valueNum = parseInt(value);
  const targetRadio = document.getElementById(`p${placeNum}${valueNum}`);

  // 校验目标元素存在且当前为选中状态，避免无效触发
  if (!targetRadio || !targetRadio.checked) return;

  // 获取当前列原有选中值
  const oldValue = currentValues[placeNum - 1];
  // 查找持有当前选中值的列索引
  const oldPlaceIndex = currentValues.findIndex(val => val === valueNum);

  // 若当前值已被其他列占用，交换两者的选中值
  if (oldPlaceIndex !== -1 && oldPlaceIndex !== placeNum - 1) {
    currentValues[oldPlaceIndex] = oldValue;
  }

  // 更新当前列的选中值
  currentValues[placeNum - 1] = valueNum;

  // 同步DOM状态
  syncDOMWithCurrentValues();
}

/**
 * 同步DOM单选按钮选中状态与currentValues数组
 */
function syncDOMWithCurrentValues() {
  // 先取消所有单选按钮的选中状态，避免列内状态冲突
  document.querySelectorAll('.ratingPoints[type="radio"]').forEach(radio => {
    radio.checked = false;
  });

  // 根据currentValues设置对应单选按钮为选中
  currentValues.forEach((value, index) => {
    const place = index + 1;
    const radio = document.getElementById(`p${place}${value}`);
    // 校验元素存在后再设置，避免null报错
    if (radio) {
      radio.checked = true;
    }
  });
}

对应HTML代码（无需修改） #

<label class="ratingPoints" for="p11">1:</label>
<input class="ratingPoints" type="radio" name="vote1" value="1" onclick="checkVote(1, this.value)" id="p11" checked="checked"><br>
<label class="ratingPoints" for="p12">2:</label>
<input class="ratingPoints" type="radio" name="vote1" value="2" onclick="checkVote(1, this.value)" id="p12"><br>
<label class="ratingPoints" for="p13">3:</label>
<input class="ratingPoints" type="radio" name="vote1" value="3" onclick="checkVote(1, this.value)" id="p13"><br>
<label class="ratingPoints" for="p14">4:</label>
<input class="ratingPoints" type="radio" name="vote1" value="4" onclick="checkVote(1, this.value)" id="p14"><br>
<label class="ratingPoints" for="p15">5:</label>
<input class="ratingPoints" type="radio" name="vote1" value="5" onclick="checkVote(1, this.value)" id="p15"><br><br>

<label class="ratingPoints" for="p21">1:</label>
<input class="ratingPoints" type="radio" name="vote2" value="1" onclick="checkVote(2, this.value)" id="p21"><br>
<label class="ratingPoints" for="p22">2:</label>
<input class="ratingPoints" type="radio" name="vote2" value="2" onclick="checkVote(2, this.value)" id="p22" checked="checked"><br>
<label class="ratingPoints" for="p23">3:</label>
<input class="ratingPoints" type="radio" name="vote2" value="3" onclick="checkVote(2, this.value)" id="p23"><br>
<label class="ratingPoints" for="p24">4:</label>
<input class="ratingPoints" type="radio" name="vote2" value="4" onclick="checkVote(2, this.value)" id="p24"><br>
<label class="ratingPoints" for="p25">5:</label>
<input class="ratingPoints" type="radio" name="vote2" value="5" onclick="checkVote(2, this.value)" id="p25"><br><br>

<label class="ratingPoints" for="p31">1:</label>
<input class="ratingPoints" type="radio" name="vote3" value="1" onclick="checkVote(3, this.value)" id="p31"><br>
<label class="ratingPoints" for="p32">2:</label>
<input class="ratingPoints" type="radio" name="vote3" value="2" onclick="checkVote(3, this.value)" id="p32"><br>
<label class="ratingPoints" for="p33">3:</label>
<input class="ratingPoints" type="radio" name="vote3" value="3" onclick="checkVote(3, this.value)" id="p33" checked="checked"><br>
<label class="ratingPoints" for="p34">4:</label>
<input class="ratingPoints" type="radio" name="vote3" value="4" onclick="checkVote(3, this.value)" id="p34"><br>
<label class="ratingPoints" for="p35">5:</label>
<input class="ratingPoints" type="radio" name="vote3" value="5" onclick="checkVote(3, this.value)" id="p35"><br><br>

<label class="ratingPoints" for="p41">1:</label>
<input class="ratingPoints" type="radio" name="vote4" value="1" onclick="checkVote(4, this.value)" id="p41"><br>
<label class="ratingPoints" for="p42">2:</label>
<input class="ratingPoints" type="radio" name="vote4" value="2" onclick="checkVote(4, this.value)" id="p42"><br>
<label class="ratingPoints" for="p43">3:</label>
<input class="ratingPoints" type="radio" name="vote4" value="3" onclick="checkVote(4, this.value)" id="p43"><br>
<label class="ratingPoints" for="p44">4:</label>
<input class="ratingPoints" type="radio" name="vote4" value="4" onclick="checkVote(4, this.value)" id="p44" checked="checked"><br>
<label class="ratingPoints" for="p45">5:</label>
<input class="ratingPoints" type="radio" name="vote4" value="5" onclick="checkVote(4, this.value)" id="p45"><br><br>

<label class="ratingPoints" for="p51">1:</label>
<input class="ratingPoints" type="radio" name="vote5" value="1" onclick="checkVote(5, this.value)" id="p51"><br>
<label class="ratingPoints" for="p52">2:</label>
<input class="ratingPoints" type="radio" name="vote5" value="2" onclick="checkVote(5, this.value)" id="p52"><br>
<label class="ratingPoints" for="p53">3:</label>
<input class="ratingPoints" type="radio" name="vote5" value="3" onclick="checkVote(5, this.value)" id="p53"><br>
<label class="ratingPoints" for="p54">4:</label>
<input class="ratingPoints" type="radio" name="vote5" value="4" onclick="checkVote(5, this.value)" id="p54"><br>
<label class="ratingPoints" for="p55">5:</label>
<input class="ratingPoints" type="radio" name="vote5" value="5" onclick="checkVote(5, this.value)" id="p55" checked="checked"><br>

修复说明 #

1. 增加DOM元素校验：获取元素后先判断是否存在，避免null报错
2. 变量规范化：用let声明所有变量，避免全局污染
3. 初始状态同步：页面加载完成后调用syncDOMWithCurrentValues，确保DOM状态与currentValues一致
4. 全量状态同步：每次更新后先取消所有单选按钮选中状态，再重新设置，避免列内状态冲突
5. 类型转换：将传入的place和value转换为数字类型，避免字符串比较异常

内容的提问来源于stack exchange，提问作者Caleb Nichols