on selecting this radio button, set the class of this div to this

hello masters of the js universe, I need some assistance.

I have 3 or so radio inputs and upon clicking them I'd like an enclosing div tag to have a css class applied to it. Then, upon clicking one of the other radio inputs I'd like the class on the previously selected input to be deactivated.

The form I'm referring to with this is at http://triumphantevents.co.uk/events...=djd-bt_busrel


With the enclosing div tag, is the concept to give it an id? and then on the radio button something like:

Code: Select all

onclick="document.getElementById('divID').class='formsel';"

Doesn't seem to work for me. But what I'm really curious about is the way to deselect the div's class that has the class 'formsel' applied once another radio button has been checked... e.g to do it, do I need to create an individual function to de-formsel each div? or is there a way to just say "if this radio button is selected, apply this class to every other div besides this one"?


Thanks for any help on this.

Okay, this is a fairly simple task

what you want is to set up a function somewhere

Code: Select all

function changeClass(divToChange, newClass)
{
        divToChange = document.getElementById(divToChange);
        divToChange.className = newClass;
}

now of course you already have a stylesheet and know what class you want to use for each radio button. Give the div you want to change an id="this" element supplementing "this" with what you like in the below code

Code: Select all

<input type="radio" value="something" name="somethingelse" onclick="this.checked ? changeClass('this', 'className') : ''" />
<input type="radio" value="somethingthatsnotnothing" name="something" onclick="this.checked ? onclick('this', 'className2')" />

etc...

Fairly simple example above but it should perform the task

I have been studying this post for a week, honestly. It is gradually making sense to me.

LOL, sorry, I normally comment my examples...

The function takes two arguments, the id of a HTML element and the name of the class that this element will receive.

Within the function, the first line is storing a reference to the html element with the next line setting the className property to the given class.

The HTML code contains a ternary function call esentially, when the radio button is clicked, it checks whether that click has resulted in the radio button being selected. If it has, it runs the function giving it an element id and a class name. If it turns out that this click has resulted in the radio not being checked any longer, nothing happens.

Hope that makes it a bit clearer.