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)

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)

• javascript
• html
• css

• 1 With JavaScript, yes: of course it is. But why? And why not just use elements designed for the purpose? – David Thomas Commented Sep 18, 2013 at 17:57
• If you have a list of 20 values, you have a list of 20 values, there's nothing we can do here. But maybe you prefer to use an array as parameter in your switcher function, this will make it more comfortable to use it. – Zane Commented Sep 18, 2013 at 18:00
• Do you need it to preserve a "value" which is accessible via JS? Or does it just change colors? – Richard JP Le Guen Commented Sep 18, 2013 at 18:00
• If you don't need JavaScript to manipulate the "value" you can try something in CSS: jsfiddle.net/eatgT – Richard JP Le Guen Commented Sep 18, 2013 at 18:08

3 Answers 3

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

Get rid of that html onClick, using inline javascript is bad practice. In your javascript file that you include on the page, add this function:

var checkboxes = document.querySelectorAll('.button');
for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].addEventListener('click', function() {
        for (var j = 0; j < checkboxes.length; j++) {
            checkboxes[j].style.background = '#241009';
        }
        this.style.background = '#c5e043';
        return false;
    });
}

What this does, is it gets all your buttons (you've given all your buttons a class of button or something similar, right?) and assigns a click event to each of them. The click event goes through all your buttons and resets them to #241009, and then takes the button you clicked on (this) and sets it to #c5e043.

This way, you don't have to create 20 different onclick functions, and you can add or remove buttons without changing the result. You also probably want to create an array that keeps track of which of the twenty buttons is active, or you could just test to see which color is active (but it would be better to set up an array).

Also, and I know that Stack Overflow hates this, this is exactly the kind of thing that is made easier by a javascript library. Once you get a really good handle on pure javascript, look into a library like jQuery or other to simplify this process.

To scale out the javascript solution to handle many "buttons", create a class. The class should have a field containing an array of divs. Within the class also provide a function such as setDivState(isSelected). Within the method handling the click action which must have the div which was clicked, perform a forEach on the divs setting the state of each div.