如何将图片添加到单选按钮答案

【问题标题】：How do I add pictures to Radio buttons如何将图片添加到单选按钮
【发布时间】：2013-08-25 01:13:18
【问题描述】：

如何将图片添加到单选按钮？我希望单选按钮本身消失并替换为图像。另外，我该如何制作，以便在单击图像时它会反转或变暗，对于提出的每个问题，以便用户知道选择了哪张图片？

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

【问题讨论】：

标签： javascript html

【解决方案1】：

对于单选按钮图像的良好解决方案，这是一个很好的问题： How do I style radio buttons with images - laughing smiley for good, sad smiley for bad?

对于您问题的第二部分，您希望使用 CSS3 滤镜效果，但这些效果尚未广泛使用。同时，您可能需要考虑在图像周围使用边框。所以，在鼠标点击时，给它一个 5px 的红色边框，或者一些突出的东西。

此外，在您的输入标签上，我建议不要将 onclick 放在标签上。相反，在 js 中尝试一些类似的东西：

var inputs = document.querySelectorAll("input[type=radio]");
inputs.onClick = function(){...}

您的代码最终会看起来更整洁。

【讨论】：

我已经尝试了代码，但它对我不起作用。你能举个例子吗？
首先，我必须将 querySelector() 更改为 querySelectorAll()。这将返回每个单选按钮，而不仅仅是第一个。 var inputs = document.querySelectorAll("input[type=radio") for(var i=0;i
...另外，您可能希望中包含
我已经尝试过了，但没有用图片代替单选按钮。你能用 jsfiddle 给我看吗？
图片实际上是在的位置。您不能用图像替换实际的单选按钮。因此，您将有一个单选按钮 - 带有相邻的图像而不是文本。看看我链接到的问题。这是我要做的解决方案。此外，如果您真的不希望出现实际的单选按钮小部件，则必须有一个变量来跟踪单击了哪个图像。