如何將圖片添加到單選按鈕

如何將圖片添加到單選按鈕？我希望單選按鈕本身消失並換成圖像。另外我該如何做到這一點，以便當圖像被點擊時，它會被翻轉或變暗，對於每個問題，讓用戶知道哪張圖片被選中？如何將圖片添加到單選按鈕

<!DOCTYPE html> 
<html> 
<head> 


</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="--"; 
    } 
    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="<a href=#>att 8gb black</a>"; 
     } 
     else if (q1=="Other" && q2=="8GB" && q3=="White") 
     { 
      document.getElementById("linkDiv").innerHTML="<a href=#>other 8b 
white</a>"; 
     } 
     else if (q1=="AT&T" && q2=="16GB" && q3=="White") 
     { 
      document.getElementById("linkDiv").innerHTML="<a href=#>another  
option</a>"; 
     } 
     else if (q1=="AT&T" && q2=="16GB" && q3=="Black") 
     { 
      document.getElementById("linkDiv").innerHTML="<a href=#>oops</a>"; 
     } 
     else if (q1=="AT&T" && q2=="8GB" && q3=="White") 
     { 
      document.getElementById("linkDiv").innerHTML="<a href=#>can't</a>"; 
     } 
     else if (q1=="Other" && q2=="8GB" && q3=="Black") 
     { 
      document.getElementById("linkDiv").innerHTML="<a href=#>yours</a>"; 
     } 
     else if (q1=="Other" && q2=="16GB" && q3=="White") 
     { 
      document.getElementById("linkDiv").innerHTML="<a href=#>mines</a>"; 
     } 
     else if (q1=="Other" && q2=="16GB" && q3=="Black") 
     { 
      document.getElementById("linkDiv").innerHTML="<a href=#>what</a>"; 
     } 
     else if (q1=="Unlocked" && q2=="8GB" && q3=="White") 
     { 
      document.getElementById("linkDiv").innerHTML="<a href=#>red</a>"; 
     } 
     else if (q1=="Unlocked" && q2=="8GB" && q3=="Black") 
     { 
      document.getElementById("linkDiv").innerHTML="<a href=#>orange</a>"; 
     } 
     else if (q1=="Unlocked" && q2=="16GB" && q3=="White") 
     { 
      document.getElementById("linkDiv").innerHTML="<a href=#>green</a>"; 
     } 
     else if (q1=="Unlocked" && q2=="16GB" && q3=="Black") 
     { 
      document.getElementById("linkDiv").innerHTML="<a href=#>blue</a>"; 
     } 
    } 
} 
</script> 

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

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

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

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

<br> 
<div id=linkDiv> 
--- 
</div> 
</form> 
</body>

來源

2013-08-25 user2680614

如何將圖片添加到單選按鈕

回答

相關問題