Javascript 如何用图像替换单选按钮_Javascript_Html

Javascript 如何用图像替换单选按钮

javascript html

Javascript 如何用图像替换单选按钮,javascript,html,Javascript,Html,如何用图像替换单选按钮？我已经尝试了大约10种方法，但没有任何效果，所以现在我在这里。有人请给我一个例子，无论是来自jfiddle还是详细的代码。我真的需要帮助，所以知道他们在做什么的人帮我 <!DOCTYPE html> <html> <head> <style> </style> </head> <body> <script> function tryToMakeLink() {

如何用图像替换单选按钮？我已经尝试了大约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>


函数tryToMakeLink（）
{
//获取所有选定的收音机
var q1=document.querySelector（'input[name=“q1”]：checked'）；
var q2=document.querySelector（'input[name=“q2”]：checked'）；
var q3=document.querySelector（'input[name=“q3”]：checked'）；
//确保用户已选择所有3个选项
如果（q1==null | | q2==null | | q3==null）
{
document.getElementById（“linkDiv”）.innerHTML=“”；
}
其他的
{
//现在我们知道我们有3台收音机，所以获取它们的值
q1=q1.0；数值；
q2=q2.0的值；
q3=q3.0值；
//现在检查这些值以显示所需的不同链接
配置
如果（第一季度==“AT&T”和第二季度==“8GB”和第三季度==“黑色”）
{
document.getElementById（“linkDiv”）.innerHTML=“att 8gb黑色”；
}
否则如果（第一季度==“其他”和第二季度==“8GB”和第三季度==“白色”）
{
document.getElementById（“linkDiv”）.innerHTML=“其他8b白色”；
}
否则，如果（q1==“AT&T”和&q2==“16GB”和&q3==“白色”）
{
document.getElementById（“linkDiv”）.innerHTML=“另一个选项”；
}
否则，如果（q1==“AT&T”和&q2==“16GB”和&q3==“黑色”）
{
document.getElementById（“linkDiv”）.innerHTML=“oops”；
}
否则，如果（q1==“AT&T”和&q2==“8GB”和&q3==“白色”）
{
document.getElementById（“linkDiv”）.innerHTML=“不能”；
}
否则如果（第一季度==“其他”和第二季度==“8GB”和第三季度==“黑色”）
{
document.getElementById（“linkDiv”）.innerHTML=“您的”；
}
否则如果（q1==“其他”&q2==“16GB”&q3==“白色”）
{
document.getElementById（“linkDiv”）.innerHTML=“mines”；
}
否则如果（q1==“其他”&q2==“16GB”&q3==“黑色”）
{
document.getElementById（“linkDiv”）.innerHTML=“what”；
}
否则如果（q1==“解锁”和q2==“8GB”和q3==“白色”）
{
document.getElementById（“linkDiv”）.innerHTML=“红色”；
}
否则如果（q1==“未锁定”和q2==“8GB”和q3==“黑色”）
{
document.getElementById（“linkDiv”）.innerHTML=“橙色”；
}
否则如果（q1==“解锁”和q2==“16GB”和q3==“白色”）
{
document.getElementById（“linkDiv”）.innerHTML=“绿色”；
}
否则如果（q1==“解锁”和q2==“16GB”和q3==“黑色”）
{
document.getElementById（“linkDiv”）.innerHTML=“蓝色”；
}
}
}
你们有哪家航空公司？

美国电话电报公司
其他
解锁

你的手机容量是多少？

8GB
16GB

你的手机是什么颜色的？

黑色
白色

您可以使用一个很好的库来实现这个

统一JS

：

Uniform JS

使用自定义主题控件屏蔽标准表单控件。

这个问题已经被问了好几次，并且得到了回答。您确定以前在SO上找到的解决方案都不适合您吗？谷歌“图像单选按钮”。谷歌搜索更多信息examples@RyanHenderson我尝试了差不多10种不同的解决方案，但都没有效果。好的，没关系。您尝试过哪些解决方案？知道这一点会很有帮助，这样一个潜在的回答者就不会把时间浪费在你已经排除的事情上。那把小提琴看起来很管用。我看到以下两幅图片：和。我错过了什么？我没有看到任何图像。我看到了不同的风格。如果你可以用firebug检查无线电元素，你可以看到无线电被一个span包装，还有一个图像也在span上使用CSS应用。你可以用我的一段代码提供一个例子，这样我至少可以得到这个概念。