-1

如何用图像替换单选按钮？我已经尝试了大约 10 种方法，但没有任何效果，所以现在我在这里。有人请给我看一个例子，无论是来自jfiddle还是详细的代码。我真的需要帮助，所以知道他们在做什么的人可以帮助我。 

<!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/

4

1 回答 1

0

您可以为此使用一个不错的库Uniform JS：

http://uniformjs.com/ _

Uniform JS使用自定义主题控件掩盖您的标准表单控件。

于 2013-08-25T05:07:51.720 回答