Question

98

making a div like radio button

rated 0 times [ 104] [ 6] / answers: 1 / hits: 20701 / 11 Years ago, wed, september 18, 2013, 12:00:00

am wondering if its possible to make a div that behave exactly like a radio button? I'm trying to achieve this without the use of jquery which alot of people are suggesting, i checked the web and found some of it.

my previous way of doing this is by using javascript, this works for a small number

function Switcher(a,b,c,d,e){

    document.getElementById('button1').style.background=a;

    document.getElementById('button2').style.background=b;

    document.getElementById('button3').style.background=c;

    document.getElementById('button4').style.background=d;

    document.getElementById('button5').style.background=e;

}

with an onclick event

onClick=Switcher(#c5e043,#241009,#241009,#241009,#241009)

then each button clicked is switched, i can add on a check radio button function but i notice that i might need to go up to 20, which make the list really long.

am wondering if anyone out there have a simpler solution to this problem? Basically i need a div that behave like a radio button that changes bgcolor or smthg upon selected (the radio as well)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

malkajillc

Add To Favorites

Follow

Total Points: 652

Total Questions: 107

Total Answers: 98

Location: Finland

Member since Sat, Nov 6, 2021

3 Years ago

answered 11 Years ago karivictoriab · Accepted Answer

If I understand, you do want to use div instead of radio buttons to have a better control of the appearance.
My suggestion, if you can, is to use real radio button:

Use real radio buttons followed by a label like this:

<input type=radio name=rGroup value=1 id=r1 checked=checked />

<label class=radio for=r1></label>

Using CSS, hide the radio buttons:

.radios input[type=radio] {

    display:none

}

This way, you can style the label as you want. I created a simple snippet (and a jsfiddle) that fully demonstrate how to use your radio buttons with a custom look. For the example, I used a little colored box that changed when it is checked.

.radios .radio {

    background-color: #c5e043;

    display: inline-block;

    width: 10px;

    height: 10px;

    cursor: pointer;

}



.radios input[type=radio] {

    display: none;

}



.radios input[type=radio]:checked + .radio {

    background-color: #241009;

}

<div class=radios>

    <input type=radio name=rGroup value=1 id=r1 checked=checked />

    <label class=radio for=r1></label>

    

    <input type=radio name=rGroup value=2 id=r2 />

    <label class=radio for=r2></label>

    

    <input type=radio name=rGroup value=3 id=r3 />

    <label class=radio for=r3></label>

</div>

Here is the jsfiddle