Jinja生成表格中CSS开关按钮动画仅首个元素生效问题求助

问题根因 #

你遇到的问题是HTML规范中id属性全局唯一性要求被破坏导致的：
循环生成的所有开关<input>都使用了相同的id="switch"，而<label>的for属性只会匹配页面内第一个对应id的元素。因此点击任意行的开关标签，都会仅触发第一行checkbox的状态变化，对应只有首行的开关动画生效。

修复方案 #

利用Jinja循环自带的loop.index变量（代表当前循环的次数，从1开始递增），给每个开关生成唯一的id，同时对应修改label的for属性即可。

修改对应单元格的代码如下：

<td>
  <!-- 用loop.index生成唯一id -->
  <input type="checkbox" name="switch_{{ loop.index }}" id="switch_{{ loop.index }}">
  <label for="switch_{{ loop.index }}"></label>
</td>

额外优化建议 #

你当前代码中还有多处重复id，比如id="table-heading"、id="table-cell"等，这些重复id也可能导致后续样式、JS交互出现异常，建议将重复使用的标识改为class属性。

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