在相邻表格单元格中设置单选标签的样式

Question

好的，我无法影响吐出的 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>

我用这个隐藏了实际的单选按钮：

.ChoiceStructure tr input[type="radio"]{display: none;}

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

我尝试了很多其他方法，但似乎无法让它发挥作用。

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

我觉得我已经尝试了所有解决方案，但有效的解决方案除外。我感谢任何人可以提供的任何帮助。谢谢。

编辑

我不能用 CSS 做我想做的事，而是被指示寻找 Javascript 解决方案。我没有加载 JQuery 或任何其他框架的方法，所以我需要一个纯 JS 解决方案。我不擅长 JS，我可以摆弄它，但我自己写的不太好。任何帮助表示赞赏。

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

Answer 1

使用 jQuery 的解决方案

我构建了一些 jQuery 操作来解决问题。

您可以参考演示代码：http://jsfiddle.net/audetwebdesign/M8zCM/

我正在使用您的 HTML sn-p 和以下 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 中，您可以单击单选按钮并查看图像边框更改颜色。 请注意，您可以通过单击包含的图像来激活单选按钮 通过<label> 标签。另请注意，我首先从所有 首先相关标签，然后我将其应用于感兴趣的元素。

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

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

只要能链接到jQuery框架，就可以使用这个方案。

在原生 JavaScript 中构建它会做更多的工作。