making a div like radio button

Question

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)

Answer 1

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

Answer 2

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.