给单选按钮添加类

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在已选中的元素中添加图像。我该怎么做？

- user2417332

---

你想要实现什么目标？img标签是HTML代码的一部分。 - Sasi Kathimanda

我想检查答案是否正确，如果正确则添加一个绿色的勾号。 - user2417332

Answer 1

您是否需要为选中的单选框添加一个类？实际上，您可以使用CSS轻松实现此操作：

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

演示

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

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

演示3（带有勾选图像）

- Mr. Alien

---

我怎么把勾选放到单选按钮（圆圈里）里？ - user2417332

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);

- Norbert Pisz

Answer 3

试试这个：

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

- Bhojendra Rauniyar