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;}

我想要发生的是，当选中项目/单选按钮时，图像或标签会获得2px灰色边框。

我在许多其他事情中试过这个但似乎无法让它发挥作用。

.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代码段和以下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>标记。另请注意，我首先删除了所有的.highlighted类首先是相关标签，然后我将它应用于感兴趣的元素。

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

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

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

在本机JavaScript中构建它会有很多工作。

在相邻的表格单元格中设置无线电标签的样式

1 个答案:

使用jQuery