Question

我有一个有单选按钮设置的表单。当页面加载时，我想使用一些简单的脚本，立即将类名应用于相应输入的标签，当用户单击集合中的另一个单选按钮以删除该类并将类名应用于新选择的单选按钮标签时

任何想法如何做到这一点？

<form id="myForm" action="" method="post">
   <input type="radio" id="radio1" name="myRadio" value="radio1">
   <label for="radio1">radio1</label>
   <input type="radio" id="radio2" name="myRadio" value="radio2">
   <label for="radio2">radio2</label>
   <input type="radio" id="radio3" name="myRadio" value="radio3" checked="checked">
   <label for="radio3">radio3</label>
   <input type="radio" id="radio4" name="myRadio" value="radio4">
   <label for="radio4">radio4</label>
</form>

Answer 1

可以使用纯CSS完成：

input[type="radio"]:checked + label {
    color: red;
}

此选择器匹配与选中的单选按钮相邻的标签元素。如果你开始在中间添加其他元素，它将不再起作用。

您可以在更新的小提琴中看到它的实际效果。我相信这适用于所有现代浏览器，从IE7开始。

http://jsfiddle.net/GolezTrol/4YwLT/1/

[编辑]

嗯。 +选择器在IE7中有效，但input:checked显然没有。嗯，由你决定是否可以使用它。否则，您可以使用James Allardice的答案，该答案使用JQuery（无论如何都会使用JQuery）。

Answer 2

你已经获得了一个很好的CSS答案，但这里有一个使用jQuery的替代方案：

$(document).ready(function() {
   $("input[type='radio']:checked").next("label").addClass("newClass");
   $("input[type='radio']").click(function() {
       $("label").removeClass("newClass");
       $(this).next("label").addClass("newClass"); 
   }); 
});

如果你需要支持IE6，我建议使用jQuery方法作为CSS属性选择器，不支持相邻的兄弟选择器。

以上是上述代码的working example。

使用脚本应用和更改所选无线电的类名

2 个答案: