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

Demo

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

Demo 2（选择收音机框时嵌入图片）

Demo 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 */
}

将类添加到单选按钮

3 个答案: