라디오 버튼에 클래스 추가하기

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> 

나는 이와 비슷한 것을 가지고 있는데, 자바 스크립트를 사용하여 체크 된 요소에 이미지를 추가하고 싶습니다. 내가 어떻게 해?

Answer 1

확인할 라디오 클래스를 추가하는 것이 중요합니까?

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

Demo

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

Demo 2

Demo 3 (틱 이미지) (당신이 라디오 버튼을 선택하면 삽입 된 이미지)

Answer 2

: 당신은 CSS로 간단하게 그렇게 할 수 있듯이 먼저 확인 된 라디오를 찾아야합니다.

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