How do I add pictures to Radio buttons

Question

How do I add pictures to the the radio buttons? I want the radio button itself gone and replaced with an image. Also how do I make it so that when the image is clicked it gets inverted or darkened, for each question asked, so that the user knows which picture is selected?

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

score 0 · Answer 1 · edited May 23 '17 at 12:05

0

For a good solution to images for radio buttons, here's a good question: How do I style radio buttons with images - laughing smiley for good, sad smiley for bad?

For the second part of your question, you'd want to use CSS3 filter effects, but those aren't widely available yet. In the meantime, you might want to consider using borders around the images instead. So, on the mouseclick, give it a 5px red border, or something that stands out.

Further, on your input tags, I recommend against putting onclick's right there on the tags. Instead, try something in the js like:

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

Your code will end up being a little cleaner looking.

edited May 23 '17 at 12:05

Community

1
1

answered Aug 25 '13 at 01:37

itsmikem

2,118
2
26
31

I've tried the code but it doesn't work for me. Could you provide an example? – Aug 25 '13 at 01:52
First, I had to change querySelector() to querySelectorAll(). That returns every radio button, instead of just the first one. var inputs = document.querySelectorAll("input[type=radio") for(var i=0;i – itsmikem Aug 25 '13 at 02:15
...also, you might want to have the – itsmikem Aug 25 '13 at 03:57
I've tried that and no luck with getting the images in the place of the radio buttons. Could you show me in jsfiddle? – Aug 25 '13 at 15:43
The images are actually in place of the s. You can't replace the actual radio button with an image. So, you're going to have a radio button - with an adjacent image instead of text. Take a look at the question I linked to. It's the solution I'd do. Also, if you really don't want the actual radio button widgets to be there, you'd have to have a variable that keeps track of which image was clicked. – itsmikem Aug 25 '13 at 18:40
OK, so I made a start: http://jsfiddle.net/itsmikem/RRVdP/ and then I looked back at the jsfiddle from the link I mentioned earlier (http://jsfiddle.net/yijiang/Zgh24/1/) and realized its radio buttons aren't there, so you'll want to follow that one. – itsmikem Aug 25 '13 at 19:02

How do I add pictures to Radio buttons

1 Answers1