复选框返回它以前的值，而不是实际值

Question

我有一个脚本，如果选中了同一行中的其他单选框之一，它会标记第一个td单选框。问题是，当我试图从两个单选框中获取具有值的字符串时，当我再次单击复选框时，会显示同一行中另一个选中的字符串，因此这比脚本的其余部分落后了一步。我错过了什么？提前谢谢！

var doc_radios;
var docString;
var addedString;
var finalString;
var linkString;
var radios = document.getElementsByName('custom_string');
var doc_radios = document.getElementsByName('doc_string');
function updateString() {
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
// var with the value of the selected radio box
addedString = radios[i].value;
break;
}
}
for (var i = 0, length = doc_radios.length; i < length; i++) {
if (doc_radios[i].checked) {
// var with the value of the selected radio box
docString = doc_radios[i].value;
break;
}
}
final_string = 'https://google.com/' + addedString + '/' + docString + '_' + addedString + '.txt';
linkString = document.getElementById('linkString');
linkString.setAttribute('href', final_string);
linkString.innerHTML = final_string;
}
function copyButton() {
var copyText = document.getElementById("linkString");
window.getSelection().selectAllChildren(copyText);
document.execCommand("copy");
var tooltip = document.getElementById("copyTooltip");
tooltip.innerHTML = "Copied " + copyText.getAttribute('href');
}
function outFunc() {
var tooltip = document.getElementById("copyTooltip");
tooltip.innerHTML = "Copy to clipboard";
}
var checkboxes = document.querySelectorAll('[type="radio"]');
[].forEach.call(checkboxes, function(checkbox) {
checkbox.onchange = function() {
var currentRow = this.parentNode.parentNode;
var cbElems = currentRow.querySelectorAll('[name="doc_string"]');
[].forEach.call(cbElems, function(cb) {
cb.checked = this.checked;
}.bind(this))
};
});

* {
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%;
margin-left: ;
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;
}

<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" value="DE" onclick="updateString()" />
</td>
<td>
<input name="custom_string" type="radio" id="EN" value="EN" onclick="updateString()" />
</td>
<td>
<input name="custom_string" type="radio" id="ES" value="ES" onclick="updateString()" />
</td>
<td>
<input name="custom_string" type="radio" id="FR" value="FR" onclick="updateString()" />
</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" value="DE" onclick="updateString()" />
</td>
<td>
<input name="custom_string" type="radio" id="EN" value="EN" onclick="updateString()" />
</td>
<td>
<input name="custom_string" type="radio" id="ES" value="ES" onclick="updateString()" />
</td>
<td>
<input name="custom_string" type="radio" id="FR" value="FR" onclick="updateString()" />
</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" value="DE" onclick="updateString()" />
</td>
<td>
<input name="custom_string" type="radio" id="EN" value="EN" onclick="updateString()" />
</td>
<td>
<input name="custom_string" type="radio" id="ES" value="ES" onclick="updateString()" />
</td>
<td>
<input name="custom_string" type="radio" id="FR" value="FR" onclick="updateString()" />
</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>

Answer 1

我更改了它。它似乎有效。谢谢

var doc_radios;
var docString;
var addedString;
var final_string;
var linkString;
var radios = document.getElementsByName('custom_string');
var doc_radios = document.getElementsByName('doc_string');
var radiosCheckBoxes = document.querySelectorAll('input[type=radio]');
function changeHandler(event) {
for (var i = 0, lengthi = radios.length; i < lengthi; i++) {
if (radios[i].checked) {
// var with the value of the selected radio box
addedString = radios[i].value;
break;
}
}
for (var j = 0, lengthj = doc_radios.length; j < lengthj; j++) {
if (doc_radios[j].checked) {
// var with the value of the selected radio box
docString = doc_radios[j].value;
break;
}
}
final_string = 'https://google.com/' + addedString + '/' + docString + '_' + addedString + '.txt';
linkString = document.getElementById('linkString');
linkString.setAttribute('href', final_string);
linkString.innerHTML = final_string;
}
var checkboxes = document.querySelectorAll('[type="radio"]');
[].forEach.call(checkboxes, function(checkbox) {
checkbox.onchange = function() {
var currentRow = this.parentNode.parentNode;
var cbElems = currentRow.querySelectorAll('[name="doc_string"]');
[].forEach.call(cbElems, function(cb) {
cb.checked = this.checked;
}.bind(this));
};
});

Array.prototype.forEach.call(radiosCheckBoxes, function(radio) {
radio.addEventListener('change', changeHandler);
});
function copyButton() {
var copyText = document.getElementById("linkString");
window.getSelection().selectAllChildren(copyText);
document.execCommand("copy");
var tooltip = document.getElementById("copyTooltip");
tooltip.innerHTML = "Copied " + copyText.getAttribute('href');
}
function outFunc() {
var tooltip = document.getElementById("copyTooltip");
tooltip.innerHTML = "Copy to clipboard";
}

* {
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%;
margin-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;
}

<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" value="DE" onchange="updateString()" />
</td>
<td>
<input name="custom_string" type="radio" id="EN" value="EN" onchange="updateString()" />
</td>
<td>
<input name="custom_string" type="radio" id="ES" value="ES" onchange="updateString()" />
</td>
<td>
<input name="custom_string" type="radio" id="FR" value="FR" onchange="updateString()" />
</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" value="DE" onchange="updateString()" />
</td>
<td>
<input name="custom_string" type="radio" id="EN" value="EN" onchange="updateString()" />
</td>
<td>
<input name="custom_string" type="radio" id="ES" value="ES" onchange="updateString()" />
</td>
<td>
<input name="custom_string" type="radio" id="FR" value="FR" onchange="updateString()" />
</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" value="DE" onchange="updateString()" />
</td>
<td>
<input name="custom_string" type="radio" id="EN" value="EN" onchange="updateString()" />
</td>
<td>
<input name="custom_string" type="radio" id="ES" value="ES" onchange="updateString()" />
</td>
<td>
<input name="custom_string" type="radio" id="FR" value="FR" onchange="updateString()" />
</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>