라디오 버튼을 이미지로 바꾸는 방법

-1

라디오 버튼을 이미지로 바꾸려면 어떻게해야합니까? 나는 약 10 가지 방법을 시도했지만 아무 것도 효과가 없으므로 여기에 있습니다. 누군가 제프 딤이나 상세 코드에서 왔는지 여부를 보여주는 예를 들어주세요. 나에게 도움이 필요한 사람이 나를 도와 주도록 정말 도움이 필요하다.라디오 버튼을 이미지로 바꾸는 방법

<!DOCTYPE html> 
<html> 
<head> 

<style> 

</style> 

</head> 
<body> 

<script> 
function tryToMakeLink() 
{ 
    //get all selected radios 
    var q1=document.querySelector('input[name="q1"]:checked'); 
    var q2=document.querySelector('input[name="q2"]:checked'); 
    var q3=document.querySelector('input[name="q3"]:checked'); 
    //make sure the user has selected all 3 
    if (q1==null || q2==null ||q3==null) 
    { 
     document.getElementById("linkDiv").innerHTML="<input type=button 
disabled=disabled value=Next>"; 
    } 
    else 
    { 
     //now we know we have 3 radios, so get their values 
     q1=q1.value; 
     q2=q2.value; 
     q3=q3.value; 
     //now check the values to display a different link for the desired 
configuration 
     if (q1=="AT&T" && q2=="8GB" && q3=="Black") 
     { 
      document.getElementById("linkDiv").innerHTML="<input type=button value=Next 
onclick=\"window.location.href='http://google.com/';\">att 8gb black</input>"; 
     } 
     else if (q1=="Other" && q2=="8GB" && q3=="White") 
     { 
      document.getElementById("linkDiv").innerHTML="<input type=button value=Next 
onclick=\"window.location.href='http://yahoo.com/';\">other 8b white</input>"; 
     } 
     else if (q1=="AT&T" && q2=="16GB" && q3=="White") 
     { 
      document.getElementById("linkDiv").innerHTML="<input type=button value=Next 
onclick=\"window.location.href='http://bing.com/';\">another option</input>"; 
     } 
     else if (q1=="AT&T" && q2=="16GB" && q3=="Black") 
     { 
      document.getElementById("linkDiv").innerHTML="<input type=button value=Next 
onclick=\"window.location.href='http://gmail.com/';\">oops</input>"; 
     } 
     else if (q1=="AT&T" && q2=="8GB" && q3=="White") 
     { 
      document.getElementById("linkDiv").innerHTML="<input type=button value=Next 
onclick=\"window.location.href='http://hotmail.com/';\">can't</input>"; 
     } 
     else if (q1=="Other" && q2=="8GB" && q3=="Black") 
     { 
      document.getElementById("linkDiv").innerHTML="<input type=button value=Next 
onclick=\"window.location.href='http://images.google.com/';\">yours</input>"; 
     } 
     else if (q1=="Other" && q2=="16GB" && q3=="White") 
     { 
      document.getElementById("linkDiv").innerHTML="<input type=button value=Next 
onclick=\"window.location.href='http://youtube.com/';\">mines</input>"; 
     } 
     else if (q1=="Other" && q2=="16GB" && q3=="Black") 
     { 
      document.getElementById("linkDiv").innerHTML="<input type=button value=Next 
onclick=\"window.location.href='http://docs.google.com/';\">what</input>"; 
     } 
     else if (q1=="Unlocked" && q2=="8GB" && q3=="White") 
     { 
      document.getElementById("linkDiv").innerHTML="<input type=button value=Next 
onclick=\"window.location.href='http://wepriceit.webs.com/';\">red</input>"; 
     } 
     else if (q1=="Unlocked" && q2=="8GB" && q3=="Black") 
     { 
      document.getElementById("linkDiv").innerHTML="<input type=button value=Next 
onclick=\"window.location.href='http://webs.com/';\">orange</input>"; 
     } 
     else if (q1=="Unlocked" && q2=="16GB" && q3=="White") 
     { 
      document.getElementById("linkDiv").innerHTML="<input type=button value=Next 
onclick=\"window.location.href='http://gazelle.com/';\">green</input>"; 
     } 
     else if (q1=="Unlocked" && q2=="16GB" && q3=="Black") 
     { 
      document.getElementById("linkDiv").innerHTML="<input type=button value=Next  
onclick=\"window.location.href='http://glyde.com/';\">blue</input>"; 
     } 
    } 
} 
</script> 

<form name="quiz" id='quiz'> 


What carrier do you have? 
<ul style="margin-top: 1pt" id="navlist"> 
    <li style="list-style: none;"><input type="radio" onclick=tryToMakeLink(); 
name="q1" value="AT&T"/>AT&T</li> 
    <li style="list-style: none;"><input type="radio" onclick=tryToMakeLink(); 
name="q1" value="Other"/>Other</li> 
    <li style="list-style: none;"><input type="radio" onclick=tryToMakeLink();  
name="q1" value="Unlocked"/>Unlocked</li> 
</ul> 

What is your phones capicity? 
<ul style="margin-top: 1pt" id="navlist"> 
    <li style="list-style: none;"><input type="radio" onclick=tryToMakeLink(); 
name="q2" value="8GB"/>8GB</li> 
    <li style="list-style: none;"><input type="radio" onclick=tryToMakeLink(); 
name="q2" value="16GB"/>16GB</li> 
</ul> 

What color is your phone? 
<ul style="margin-top: 1pt" id="navlist"> 
    <li style="list-style: none;"><input type="radio" onclick=tryToMakeLink(); 
name="q3" value="Black"/>Black</li> 
    <li style="list-style: none;"><input type="radio" onclick=tryToMakeLink(); 
name="q3" value="White"/>White</li> 
</ul> 



<br> 
<div id=linkDiv> 
<input type=button disabled=disabled value=Next> 
</div> 
</form> 
</body> 
</html>

http://jsfiddle.net/xhuLZ/1/

출처

2013-08-25 user2680614

이 질문은 여러 번 답변되었습니다. SO에서 발견 된 이전 솔루션이 귀하에게 적합하지 않습니까? 구글 "이미지 라디오 버튼". – htxryan

http://jsfiddle.net/EwfwQ/9/ 더 많은 예제를 보려면 – Unknown

@ RyanHenderson 거의 10 가지 솔루션을 시도했지만 아무 것도 작동하지 않았습니다. – user2680614