单选框取值滞后问题：同行动态关联勾选后生成链接始终返回旧值

• 事件触发顺序不匹配：
  语言类单选框的updateString()绑定在onclick事件上，触发优先级早于全局绑定的onchange联动逻辑。点击语言框时，先执行updateString()读取文档框的选中值，此时联动逻辑尚未修改文档框的选中状态，读到的是上一次的旧值；之后onchange才完成文档框的勾选操作，但不会再次触发链接更新，最终表现为文档类取值滞后一步。
• 附加疏漏：
  • 全局onchange回调未区分触发源，文档类单选框点击时也会执行联动逻辑，不符合单向联动的需求
  • 变量名大小写不一致：预先声明的finalString与实际赋值的final_string不匹配
  • HTML中多行的语言类单选框id完全重复，不符合DOM规范
  • CSS存在空属性语法错误

HTML #

<table>
  <thead>
    <tr>
      <th>DOC/LANG</th>
      <th>DE</th>
      <th>EN</th>
      <th>ES</th>
      <th>FR</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input name="doc_string" type="radio" id="DOC1" value="DOC1" />DOC1
      </td>
      <td>
        <input name="custom_string" type="radio" id="DE_row1" value="DE" />
      </td>
      <td>
        <input name="custom_string" type="radio" id="EN_row1" value="EN" />
      </td>
      <td>
        <input name="custom_string" type="radio" id="ES_row1" value="ES" />
      </td>
      <td>
        <input name="custom_string" type="radio" id="FR_row1" value="FR" />
      </td>
    </tr>
    <tr>
      <td>
        <input name="doc_string" type="radio" id="DOC2" value="DOC2" />DOC2
      </td>
      <td>
        <input name="custom_string" type="radio" id="DE_row2" value="DE" />
      </td>
      <td>
        <input name="custom_string" type="radio" id="EN_row2" value="EN" />
      </td>
      <td>
        <input name="custom_string" type="radio" id="ES_row2" value="ES" />
      </td>
      <td>
        <input name="custom_string" type="radio" id="FR_row2" value="FR" />
      </td>
    </tr>
    <tr>
      <td>
        <input name="doc_string" type="radio" id="DOC3" value="DOC3" />DOC3
      </td>
      <td>
        <input name="custom_string" type="radio" id="DE_row3" value="DE" />
      </td>
      <td>
        <input name="custom_string" type="radio" id="EN_row3" value="EN" />
      </td>
      <td>
        <input name="custom_string" type="radio" id="ES_row3" value="ES" />
      </td>
      <td>
        <input name="custom_string" type="radio" id="FR_row3" value="FR" />
      </td>
    </tr>
  </tbody>
</table>
<br />
<p class="finalLink"><strong>FINAL LINK (Click on it to view or hit the button to copy to clipboard)</strong></p>
<br />
<a target="_blank" id="linkString" href="#" style="padding-right: 10px;">Select a checkbox</a>
<br /><br />
<div class="tooltip">
  <button onclick="copyButton()" onmouseout="outFunc()">
    <span class="tooltiptext" id="copyTooltip">Copy to clipboard</span>
    COPY LINK
  </button>
</div>

CSS #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin-left: 25px;
  margin-top: 25px;
}

table {
  border: 1px solid #ccc;
  text-align: center;
}

table th {
  font-size: 18px;
}

table td:first-child {
  font-size: 18px;
  font-weight: 700;
  text-align: left;
}

table td:first-child input {
  margin-right: 10px;
}

table th:first-child {
  font-size: 14px;
  font-weight: 400;
}

table td,
table th {
  border: 1px solid #ccc;
  padding: 5px 10px;
}

td,
td p {
  padding: 2px 10px;
}

button {
  padding: 5px 15px;
}

.tooltip {
  position: relative;
  display: inline-block;
  width: 760px;
}

.tooltip button {
  width: 50%;
}

p.finalLink {}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 380px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 0%;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

JavaScript #

let doc_radios = document.getElementsByName('doc_string');
let radios = document.getElementsByName('custom_string');
let addedString = '';
let docString = '';
let finalString = '';
let linkString = document.getElementById('linkString');

function updateString() {
  // 获取当前选中的语言类单选框值
  addedString = '';
  for (let i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      addedString = radios[i].value;
      break;
    }
  }
  // 获取当前选中的文档类单选框值
  docString = '';
  for (let i = 0; i < doc_radios.length; i++) {
    if (doc_radios[i].checked) {
      docString = doc_radios[i].value;
      break;
    }
  }

  finalString = 'https://your-target-domain.com/' + addedString + '/' + docString + '_' + addedString + '.txt';
  linkString.setAttribute('href', finalString);
  linkString.innerHTML = finalString;
}

function copyButton() {
  let copyText = document.getElementById("linkString");
  window.getSelection().selectAllChildren(copyText);
  document.execCommand("copy");
  let tooltip = document.getElementById("copyTooltip");
  tooltip.innerHTML = "Copied " + copyText.getAttribute('href');
}

function outFunc() {
  let tooltip = document.getElementById("copyTooltip");
  tooltip.innerHTML = "Copy to clipboard";
}

// 绑定所有单选框的change事件
const allRadios = document.querySelectorAll('[type="radio"]');
allRadios.forEach(radio => {
  radio.addEventListener('change', function() {
    // 仅当触发源是语言类单选框时，才执行联动逻辑
    if (this.name !== 'custom_string') return;

    const currentRow = this.closest('tr');
    const rowDocRadio = currentRow.querySelector('[name="doc_string"]');
    // 设置同行文档框为选中状态
    rowDocRadio.checked = this.checked;
    // 联动完成后再执行链接更新，保证读到最新的选中值
    updateString();
  });
});

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