为何我的代码中勾选checkbox时hely变量仅递增不递减？

我来帮你梳理下代码里的问题，这才导致hely变量只会递增不会递减：

核心问题1：未正确获取当前操作的Checkbox元素 #

你的checkingFunction里直接用了checkbox变量，但这个变量实际指向的是页面里id为checkbox的<form>元素（浏览器会自动把元素id挂载为全局变量），而不是你点击的那个复选框。表单元素根本没有checked属性，所以checkbox.checked == true永远是false，每次点击都会走到else分支，hely自然只会一直递增。

核心问题2：重复使用相同的ID #

页面里所有的<label>都用了id="change"，ID在HTML里必须是唯一标识，这种重复会导致DOM操作出现不可预期的问题——就算逻辑对了，你也只能更新第一个匹配到的label内容。

额外优化点：初始值逻辑 #

你的hely初始值设为0，勾选时减1会变成负数，大概率不符合“剩余空间”的业务逻辑，建议改成初始有对应数量的空间（比如表格里有6个复选框，初始hely=6）。

修复后的完整代码示例 #

HTML部分：

<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Piarista Kollégium - Stúdiumi jelentkezés</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div class="topnav">
<div class="topnav-centered">
<a href="#home" class="active">Jelentkezés</a>
</div>
<a href="updates.html">Frissítések</a>
<div class="topnav-right">
<a href="login.html">Bejelentkezés</a>
</div>
</div>
<div id="head">
<img src="logo.png">
</div>
<h2>Üdvözöllek, XY!</h2>
<!-- 新增唯一的剩余空间显示容器 -->
<div id="remaining-space">剩余空间：6</div>
<!-- 修改表单ID，避免和全局变量冲突 -->
<form class="checkbox" id="booking-form" action="">
<table>
<thead>
<tr>
<th></th>
<th>1.</th>
<th>2.</th>
<th>3.</th>
<th>4.</th>
<th>5.</th>
<th>6.</th>
</tr>
</thead>
<tbody>
<tr>
<th>Hétfő</th>
<!-- 传递event参数给函数，去掉重复的label ID -->
<td><input type="checkbox" id="he1" onclick="checkingFunction(event)" name="hetfo"><label for="he1"> </label></td>
<td><input type="checkbox" id="he2" onclick="checkingFunction(event)" name="hetfo"><label for="he2"> </label></td>
<td><input type="checkbox" id="he3" onclick="checkingFunction(event)" name="hetfo"><label for="he3"> </label></td>
<td><input type="checkbox" id="he4" onclick="checkingFunction(event)" name="hetfo"><label for="he4"> </label></td>
<td><input type="checkbox" id="he5" onclick="checkingFunction(event)" name="hetfo"><label for="he5"></label> </td>
<td><input type="checkbox" id="he6" onclick="checkingFunction(event)" name="hetfo"><label for="he6"> </label></td>
</tr>
</tbody>
</table>
<input type="submit" class="button" value="Jelentkezés elküldése">
</form>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

JavaScript部分（main.js）：

// 初始剩余空间设为6，对应表格里的6个可选位置
var hely = 6;
// 获取用于显示剩余空间的唯一容器
var remainingSpaceEl = document.getElementById('remaining-space');

function checkingFunction(event) {
  // 通过event.target获取当前点击的复选框元素
  const checkbox = event.target;
  
  if (checkbox.checked) {
    hely--;
  } else {
    hely++;
  }
  
  // 更新剩余空间的显示内容
  remainingSpaceEl.textContent = `剩余空间：${hely}`;
}

修复说明 #

1. 通过event.target获取当前操作的复选框：确保每次判断的都是用户实际点击的那个复选框的选中状态，不会再把表单当成复选框。
2. 使用唯一容器显示剩余空间：解决了ID重复的问题，让剩余空间的显示更清晰可控。
3. 修改表单ID：避免了全局变量名冲突，防止出现误判元素的情况。

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