单击时如何将CSS（背景图像）应用于单选按钮？

Question

我有一组单选按钮，

    <input type="radio" NAME="pizzasize" value="1"/>100&#37; of the time<br />
   <input type="radio" NAME="pizzasize" value="2" />75&#37; of the time<br />
       <input type="radio"  NAME="pizzasize" value="3"/>50&#37; of the time<br />
       <input type="radio"  NAME="pizzasize" value="4"/>25&#37; of the time<br />

我需要像上面的图像一样改变radiobuttons格式。 我怎么能这样做？..

由于 拉维

Answer 1

最简单的方法可能是为“selected”定义一个类，然后将该类分配给radiobuttonlist的checked选项。

$("#whatevertheparentidis :radio").removeClass("selected");
$("#whatevertheparentidis :checked").addClass("selected");

您可以将图像定义为.selected类的背景图像。

Answer 2

通过javascript / jquery设置选择类的公寓，您可以使用像:checked这样的伪类选择器。请参阅browser compatibility。

Answer 3

您需要将单选按钮放在label中并将背景样式主要应用于标签（您还可以将样式添加到单选按钮本身，但请记住它们的文本是单独的元素） 。不幸的是，由于CSS没有一次讨论的:contains伪类（由于性能问题），你将被迫抛出一些JavaScript。

示例（live copy）：

CSS：

label.highlight {
    background-color: yellow; /* Or whatever, obviously */
}

input[type=radio] {
    /* Styles you want applied to the radio buttons when *not* selected */
}

label.highlight input[type=radio] {
    /* ...any styles you want applied to the radio button when
       it's selected; this is more broadly cross-compatible
       than :checked, sadly */
}

HTML：

<label><input type='radio' name='foo' value='1'> One</label>
<br><label><input type='radio' name='foo' value='2'> Two</label>
<br><label><input type='radio' name='foo' value='3'> Three</label>

使用jQuery的JavaScript：

jQuery(function($) {

  $("input:radio").click(function() {
    if (this.checked) {
      $("label.highlight").removeClass("highlight");
      $(this).closest("label").addClass("highlight");
    }
  });

});

显然，你会想要缩小那些选择器以适应你的实际标记，因为上面将适用于页面上的所有单选按钮......

当它们不在label类highlight内时，以一种方式设置单选按钮本身的样式，以及它们不同的方式。然后，当单击单选按钮时，您只需在highlight上切换label类，然后CSS负责其余部分，为label设置样式（以获取背景颜色/图像）和单选按钮（如果你想做花哨的复选标记）。

Answer 4

我不认为任何浏览器都支持单选按钮的背景图像。在改变他们的外表时，输入对象通常是困难的候选人。

我想最好用您想要的图片设置一个span或div框，然后将它连接到a）隐藏的radiobuttons（通过css隐藏它）使用javascript或b）使用javascript和php直接到你的数据库

来自Google的第一个网站：http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Answer 5

你不能设置单选按钮本身的样式（至少，不是你要求的程度）。但是，如果没有Javascript（即切换已检查/未检查图像的纯CSS），仍然有办法实现您正在寻找的效果。

See here有关如何为复选框执行此操作的工作示例。

单选按钮可以使用相同的技术完成。

最大的缺点是它使用了CSS :checked选择器，IE8及更低版本不支持它。可悲的是，这可能足以让这种技术变得毫无用处，至少在目前是这样。

同时，你必须使用Javascript解决方案。但它可能是一个非常简单的Javascript - 上面链接中的大部分CSS都可以在IE8中运行;它只是:checked选择器 - 所以你可以使用类，而只是让Javascript切换类名，所以它将是一行Javascript。

Answer 6

在我的场景中我有两组单选按钮，我希望它们有自己的'突出显示'标签，我希望它们在每个自己的集合中保留。它感觉很乱，但它确实有效。我不喜欢写highlight-work和highlight-status，但我不确定如何在每个单选按钮集中保持highlight。

jQuery(function($) {
    $("input:radio").click(function() {
      if (this.name == [name="posting[role_id]"]) {
        // group 1 clicked
        $("label.highlight-work").removeClass("highlight-work");
        $(this).closest("label").addClass("highlight-work");
      } else if (this.name == [name="posting[status_id]"]) {
        // group 2 clicked
        $("label.highlight-status").removeClass("highlight-status");
        $(this).closest("label").addClass("highlight-status");
      }
    });
});