提问人：ricky 提问时间：8/14/2023 最后编辑：Anonymousricky 更新时间：8/15/2023 访问量：55
我创建了一个带有 type=radio 按钮的问卷（5 个问题）html，但它效果不佳
I created a questionnaire (5 questions) html with buttons of type=radio but it dont work well
问：
问题
我创建了带有输入作为单选的表格形式，然后在单击时添加一些 java 脚本函数以递增表格的第 7 行，但是当我对同一行的单选选择进行排序更改时，它不会递减相应列的相应表行中的先前增量值，并自动将第 7 行列的每个结果的相应值相加， 在第 8 行中，已应用一个 colspan
法典
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
th,
td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
</tr>
<tr>
<td><input class="r1" id="r1" type="radio" name="1" value="1" onclick="updatePoints()">Option 1</td>
<td><input class="r2" id="r2" type="radio" name="1" value="2" onclick="updatePoints1()">Option 2</td>
<td><input class="r3" id="r3" type="radio" name="1" value="3" onclick="updatePoints2()">Option 3</td>
<td><input class="r4" id="r4" type="radio" name="1" value="4" onclick="updatePoints3()">Option 4</td>
</tr>
<tr>
<td><input class="r1" type="radio" name="2" value="1" onclick="updatePoints()">Option 5</td>
<td><input class="r2" type="radio" name="2" value="2" onclick="updatePoints1()">Option 6</td>
<td><input class="r3" type="radio" name="2" value="3" onclick="updatePoints2()">Option 7</td>
<td><input class="r4" type="radio" name="2" value="4" onclick="updatePoints3()">Option 8</td>
</tr>
<tr>
<td><input class="r1" type="radio" name="3" value="1" onclick="updatePoints()">Option 9</td>
<td><input class="r2" type="radio" name="3" value="2" onclick="updatePoints1()">Option 10</td>
<td><input class="r3" type="radio" name="3" value="3" onclick="updatePoints2()">Option 11</td>
<td><input class="r4" type="radio" name="3" value="4" onclick="updatePoints3()">Option 12</td>
</tr>
<tr>
<td><input class="r1" type="radio" name="4" value="1" onclick="updatePoints()">Option 13</td>
<td><input class="r2" type="radio" name="4" value="2" onclick="updatePoints1()">Option 14</td>
<td><input class="r3" type="radio" name="4" value="3" onclick="updatePoints2()">Option 15</td>
<td><input class="r4" type="radio" name="4" value="4" onclick="updatePoints3()">Option 16</td>
</tr>
<tr>
<td><input class="r1" type="radio" name="5" value="1" onclick="updatePoints()">Option 17</td>
<td><input class="r2" type="radio" name="5" value="2" onclick="updatePoints1()">Option 18</td>
<td><input class="r3" type="radio" name="5" value="3" onclick="updatePoints2()">Option 19</td>
<td><input class="r4" type="radio" name="5" value="4" onclick="updatePoints3()">Option 20</td>
</tr>
<tr>
<td id="total1"></td>
<td id="total2"></td>
<td id="total3"></td>
<td id="total4"></td>
</tr>
<tr>
<td colspan="4"></td>
</tr>
</table>
<script>
function updatePoints() {
var totalPoints = 0;
var checkboxes = document.querySelectorAll('input[type="radio"].r1:checked')
checkboxes.forEach(function(checkbox) {
if ('input[type="radio"].r1:checked') {
totalPoints += parseInt(checkbox.value);
} else {
totalPoints -= parseInt(checkbox.value);
}
});
document.getElementById("total1").textContent = totalPoints;
}
function updatePoints1() {
var totalPoints = 0;
var checkboxes = document.querySelectorAll('input[type="radio"].r2:checked')
checkboxes.forEach(function(checkbox) {
if ('input[type="radio"].r2:checked') {
totalPoints += parseInt(checkbox.value);
} else {
totalPoints -= parseInt(checkbox.value);
}
});
document.getElementById("total2").textContent = totalPoints;
}
function updatePoints2() {
var totalPoints = 0;
var checkboxes = document.querySelectorAll('input[type="radio"].r3:checked')
checkboxes.forEach(function(checkbox) {
if ('input[type="radio"].r3:checked') {
totalPoints += parseInt(checkbox.value);
} else {
totalPoints -= parseInt(checkbox.value);
}
});
document.getElementById("total3").textContent = totalPoints;
}
function updatePoints3() {
var totalPoints = 0;
var checkboxes = document.querySelectorAll('input[type="radio"].r4:checked')
checkboxes.forEach(function(checkbox) {
if ('input[type="radio"].r4:checked') {
totalPoints += parseInt(checkbox.value);
} else {
totalPoints -= parseInt(checkbox.value);
}
});
document.getElementById("total4").textContent = totalPoints;
}
</script>
</body>
</html>
答：
0赞
Finlay
8/14/2023
#1
在切换到其他行时，您似乎遇到了一些问题，即不减少以前的值。我最终得到了这个解决方案：
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
th,
td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
</tr>
<tr>
<td><input type="radio" name="1" value="1" onclick="updatePoints(this)">Option 1</td>
<td><input type="radio" name="1" value="2" onclick="updatePoints(this)">Option 2</td>
<td><input type="radio" name="1" value="3" onclick="updatePoints(this)">Option 3</td>
<td><input type="radio" name="1" value="4" onclick="updatePoints(this)">Option 4</td>
</tr>
<tr>
<td><input type="radio" name="2" value="1" onclick="updatePoints(this)">Option 5</td>
<td><input type="radio" name="2" value="2" onclick="updatePoints(this)">Option 6</td>
<td><input type="radio" name="2" value="3" onclick="updatePoints(this)">Option 7</td>
<td><input type="radio" name="2" value="4" onclick="updatePoints(this)">Option 8</td>
</tr>
<tr>
<td><input type="radio" name="3" value="1" onclick="updatePoints(this)">Option 9</td>
<td><input type="radio" name="3" value="2" onclick="updatePoints(this)">Option 10</td>
<td><input type="radio" name="3" value="3" onclick="updatePoints(this)">Option 11</td>
<td><input type="radio" name="3" value="4" onclick="updatePoints(this)">Option 12</td>
</tr>
<tr>
<td><input type="radio" name="4" value="1" onclick="updatePoints(this)">Option 13</td>
<td><input type="radio" name="4" value="2" onclick="updatePoints(this)">Option 14</td>
<td><input type="radio" name="4" value="3" onclick="updatePoints(this)">Option 15</td>
<td><input type="radio" name="4" value="4" onclick="updatePoints(this)">Option 16</td>
</tr>
<tr>
<td><input type="radio" name="5" value="1" onclick="updatePoints(this)">Option 17</td>
<td><input type="radio" name="5" value="2" onclick="updatePoints(this)">Option 18</td>
<td><input type="radio" name="5" value="3" onclick="updatePoints(this)">Option 19</td>
<td><input type="radio" name="5" value="4" onclick="updatePoints(this)">Option 20</td>
</tr>
<tr>
<td id="total1"></td>
<td id="total2"></td>
<td id="total3"></td>
<td id="total4"></td>
</tr>
<tr>
<td colspan="4"></td>
</tr>
</table>
<script>
function updatePoints(clickedRadio) {
var totalPoints = [0, 0, 0, 0]; // Initialize an array to store totals for each column
var rows = document.querySelectorAll('tr:not(:last-child)'); // Exclude the last row
rows.forEach(function (row, rowIndex) {
var radios = row.querySelectorAll('input[type="radio"]');
radios.forEach(function (radio, columnIndex) {
if (radio.checked) {
totalPoints[columnIndex] += parseInt(radio.value);
}
});
});
// Update the total cells in the last row
for (var i = 0; i < totalPoints.length; i++) {
document.getElementById('total' + (i + 1)).textContent = totalPoints[i];
}
}
</script>
</body>
</html>
在我的版本中，我进行了以下更改：
将函数调用从 更改为 以将单击的单选按钮元素作为参数传递给函数。
onclick="updatePoints()"onclick="updatePoints(this)"通过使用循环循环访问行和列并计算每列的总分，简化了 JavaScript 代码。
删除了不同单选按钮类（r1、r2、r3、r4）的重复代码，并将逻辑合并到单个 updatePoints 函数中。
更新了总点数在最后一行的显示方式，使用循环更新相应的总分单元格。
与初始代码相比，这种方法更高效、可扩展且更易于维护，并且应该可以解决您之前遇到的问题！我希望这会有所帮助！
评论