javascript - 将类添加到单选按钮

Question

<input id="radio1" type="radio" name="rgroup" value="1" >
 <label for="radio1"><span><span></span></span>1</label>
<input id="radio2" type="radio" name="rgroup" value="2" >
 <label for="radio2"><span><span></span></span>1</label>

我有类似的东西，我想将图像添加到使用 javaScript 检查的元素中。我该怎么做？

Answer 1

为选中的收音机添加一个类对您来说很重要吗？你可以简单地使用 CSS 来做到这一点：

#radio1:checked + label {
    color: #f00;
}

演示

#radio1:checked + label:after {
    content: url(IMAGE_URL_HERE);
}

演示 2（选择单选框时嵌入图像）

演示 3（带刻度图）

Answer 2

首先，您需要找到选中的收音机：

function getCheckedRadioId(name) {
    var elements = document.getElementsByName(name);

    for (var i=0, len=elements.length; i<len; ++i)
        if (elements[i].checked) return elements[i].value;
}

然后将图像添加到选中的元素。

var img = document.createElement("img");
img.src = "http://www.google.com/intl/en_com/images/logo_plain.png";

var src = getCheckedRadioId(rgroup);
src.appendChild(img);
src.parentNode.insertBefore(img, src.nextSibling);

Answer 3

尝试这个：

input[type="radio"]:checked + label {
    background-image: url("");
    background-repeat: no-repeat;
    background-position: center left; /* or center right */
}