意外的javascript输出

Unexpected javascript output

本文关键字：输出 javascript 意外      更新时间：2023-09-26

我有很多动态生成的表行，它们通常采用以下的形式

<td class="seatClass" >
    <label for="C" class="label-format" >
        <span > C0</span >
    </label >
    <input type = "checkbox" id = "C" name = "seats[US57][]" style = "display: inline-block;" value = "C"  class="terminalCheckbox" onchange = "parentNode.querySelector('span').classList.toggle('green');" />
</td>

基本上，我的代码在不同的行中显示了很多标签和复选框。如果X代表复选框，你可以想象这样的

LX IX DX JX
OX PX IX DX 
BX AX WX QX

现在，有时这些行包含相同的标签——例如，我出现在第一行和第二行中，两者的代码几乎相同（因为它们的id和名称的值是动态的）。

无论如何，我面临着一个奇怪的问题。如果你选中一个复选框，我希望它的关联字母变成绿色，因此我添加了一些javascript。这很好用。然而，我的问题是说我点击了第二行的字母I（而不是复选框）。如果我这样做，第一行中I的复选框将被选中，第一行的I将变为绿色。所以勾选复选框可以正常工作，但如果我点击一封信，事情就会一团糟。

查看我的代码有什么原因可以解释为什么会发生这种情况吗？我对此没有其他javascript，我只能认为这是因为标签和复选框正在其他行上复制，但这仍然让我有点困惑，为什么会发生这种情况。

感谢

请注意，ID必须是唯一的。

不指定for属性，而是使用标签包装输入。这使得不必知道嵌套控件的确切id。

.green{
  color:green;
  }
<table>
  <tr>
<td class="seatClass" >
    <label class="label-format" >
        <span > C0</span >
   
    <input type="checkbox"  name="seats[US57][]" style="display: inline-block;" value="C"  class="terminalCheckbox" onchange="parentNode.classList.toggle('green');" />
       </label >
</td>
    </tr>
  <tr>
<td class="seatClass" >
    <label class="label-format" >
        <span > C0</span >
   <!-- note: change the onchange javascript to match the new layout.
       The label will now be the parent of the input. -->
    <input type="checkbox"  name="seats[US57][]" style="display: inline-block;" value="C"  class="terminalCheckbox" onchange="parentNode.classList.toggle('green');" />
       </label >
</td>
    </tr>
  </table>

相关文章：