Javascript 在相邻表格单元格中设置收音机标签的样式

好的，我不能影响HTML被吐出，因为它来自在线调查工具。但是我可以链接到我自己的CSS样式表，并以我喜欢的方式影响样式

问题是，我有一系列带有图像的单选按钮，HTML如下所示：

<table class="ChoiceStructure">
  <tr>
    <td class="ControlContainer">
      <input choiceid="1" type="radio" name="QID16" id="QID16-1">
    </td>
    <td class="LabelContainer">
      <span class="LabelWrapper">
        <label for="QID16-1">
          <img src="some/image1.jpg" />
        </label>
      </span>
    </td>
    <td class="ControlContainer">
      <input choiceid="1" type="radio" name="QID16" id="QID16-2">
    </td>
    <td class="LabelContainer">
      <span class="LabelWrapper">
        <label for="QID16-2">
          <img src="some/image2.jpg" />
        </label>
      </span>
    </td>
    <td class="ControlContainer">
      <input choiceid="1" type="radio" name="QID16" id="QID16-3">
    </td>
    <td class="LabelContainer">
      <span class="LabelWrapper">
        <label for="QID16-3">
          <img src="some/image3.jpg" />
        </label>
      </span>
    </td>
</table>

我希望在选中项目/选中单选按钮时，让图像或标签获得2倍的灰色边框

我尝试了很多其他的方法，但似乎都没能成功

.ChoiceStructure tr input[type="radio"]:checked > td:nth-child(2) span label {
   border:2px solid #4d4d4d;
}

我觉得我已经尝试了每一个解决方案，除了一个有效的。我感谢任何人能提供的任何帮助。多谢各位

编辑

我不能用CSS做我想做的事情，而是被指示寻找Javascript解决方案。我没有加载JQuery或任何其他框架的方法，因此我需要一个纯JS解决方案。我对JS不是很在行，我可以摆弄它，但我自己写的不太好。感谢您的帮助

编辑2 我找到了一种加载JQuery的方法，因此现在这是一个选项。

使用JQuery的解决方案 我构建了一些jQuery操作来实现这一点

您可以在以下位置参考演示代码：

我正在使用您的HTML代码段和以下CSS：

.ChoiceStructure.ex1 .ControlContainer input[type="radio"] {
    display: visible;
}
.ChoiceStructure.ex2 .ControlContainer input[type="radio"] {
    display: none;
}

.ChoiceStructure .LabelWrapper img {
    border: 4px solid lightgray;
}
.ChoiceStructure .highlighted .LabelWrapper img {
    border-color: yellow;
}

我有两个例子（因此额外的类名是

.ex1

和

.ex2

）。前两个类显示/隐藏单选按钮，其他两个类在标签图像周围添加边框

jQuery操作包括：

例1：

$(".ChoiceStructure.ex1 input:radio").on("click", function () {
    $(this).parents(".ChoiceStructure")
        .find(".LabelContainer").removeClass("highlighted");

    $(this).parent(".ControlContainer").next().addClass("highlighted");
});

在示例1中，您可以单击单选按钮并查看图像边框的颜色变化。 请注意，您可以通过单击包含的图像来激活单选按钮 通过

标记。还请注意，I首先从所有 首先是相关标记，然后我将其应用于感兴趣的元素

在示例2中，我假设在显示页面之前选择了单选按钮。 在这种情况下，没有绑定到任何鼠标事件（单击）。jQuery语句 查找选中的输入，然后将

.highlighted

类应用于元素

$(".ChoiceStructure input:checked")
    .parent(".ControlContainer").next().addClass("highlighted");

只要可以链接到jQuery框架，就可以使用此解决方案

---

在本机JavaScript中构建此文件需要做更多的工作。

您是否有链接到JavaScript文件的方法？CSS只向下遍历。因此，不幸的是，没有办法将单选按钮被选中的信息严格地通过CSS传递给父元素和父元素的相邻元素。问题是CSS选择器不能以祖先/父元素为目标，这正是您试图做的。如果label和input元素是兄弟元素，那么您可以这样做，但它们都是两个独立表单元格的子元素。我正在研究是否可以直接添加javascript或链接到文件。@MarcAudet已更新并标记。谢谢你的帮助，谢谢！我稍微调整了一下，但这满足了我的需要。我感谢你的帮助。不客气，我在这个问题上工作得很开心！祝您一切顺利，欢迎光临！

$(".ChoiceStructure input:checked")
    .parent(".ControlContainer").next().addClass("highlighted");