1

好的，我无法影响吐出的 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 的方法，现在这是一个选项。

4

1 回答 1

0

使用 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 中构建它会做更多的工作。

于 2013-05-23T02:41:07.920 回答