Question

<style type="text/css">
.radiostyle {
    background-color: #999;
}
</style>

<label for="a1" class="radiostyle">
<Input type = radio Name = 1 Value = 100 Onclick="changecss()" id="a1">
100 bucks</label>

函数changecss（）的代码是什么，以便在单击单选按钮时，无线电背景会变为其他颜色，例如，绿色。请帮忙，我已经在网上找了几个小时没有解决方案。

Answer 1

您可以使用only-CSS解决方案（CSS3）：

HTML：

<input type="radio" name="1" value="100" id="a1">
<label for="a1" class="radiostyle">100 bucks</label>

CSS：

.radiostyle {
    background-color: #999;
}
input[type=radio]:checked+label {
/* Or `#a1:checked+label` if you only want it for that input */
    background-color: red;
}

http://jsfiddle.net/peSJG/

Answer 2

这是一个快速jQuery示例，说明如何执行此操作：

http://jsfiddle.net/NuzpR/

Answer 3

function changecss() {
    var rb = document.getElementsByClassName('radiostyle');
    rb[0].style.backgroundColor = 'red';
}

<强> jsFiddle example

Answer 4

如果您使用的是Jquery，则可以执行以下操作：

$("#a1").click(changecss);

function changecss()
{
 $(this).parent().removeClass("radiostyle").addClass("selectedStyle");
}

对于直接javascript，selectedStyle定义了你的样式：

function changecss()
{
    this.parentNode.setAttribute("class", "selectedStyle");
}

Answer 5

这应该对你有帮助..

您必须使用id属性
使用getElementById()
现在将您喜欢的属性更改为

.radiostyle { 背景色：＃999; } .radiostyle1 { background-color：#ffff; }

<script type="text/javascript">
    function changecss()
    {
        var e= document.getElementById("a1");
        e.className="radiostyle1";
    }
</script>



 <label for="a1" id="a1" class="radiostyle">
    <Input type ="radio" id="r1" Name ="r1" Value = 100 Onclick="changecss()" id="a1">
    100 bucks
</label>

单击时如何更改单选按钮的CSS

5 个答案: