PDA

View Full Version : Change div background when radio button is checked, pls help.



lacmop
01-21-2010, 01:14 AM
Pleas how can i change div bg color with active chcecked radio button

<div style="background-color:#fff;"><input type="radio" name="radio" id="radio" value="1" /> Active performer</div>
<div style="background-color:#fff;"><input type="radio" name="radio" id="radio" value="2" /> Poster</div>
<div style="background-color:#fff;"><input type="radio" name="radio" id="radio" value="3" /> Only attender</div>

- if checked, change color from #fff to #ccc


For checkboxes i find this
<span id="cDate1" style="background-color:#FFF"><input type="checkbox" name="check" id="date1" onclick="document.getElementById('cDate1').style.backgroundColor=this.checked?'#ccc':'#FFF';" /> 13.10.2010</span>

Thnx for help in advance

Old Pedant
01-21-2010, 01:19 AM
No difference between radio buttons and checkboxes for something like this.

Except you don't really need to test "this.checked" because with radio buttons the clicked on button *will* be checked. But it won't hurt.

So you *could* shorten it to just

onclick="document.getElementById('whatever').style.backgroundColor='#CCCC00';"


Why didn't you just try it??

lacmop
01-21-2010, 06:43 PM
No difference between radio buttons and checkboxes for something like this.

Except you don't really need to test "this.checked" because with radio buttons the clicked on button *will* be checked. But it won't hurt.

So you *could* shorten it to just

onclick="document.getElementById('whatever').style.backgroundColor='#CCCC00';"


Why didn't you just try it??

Thnx for your advice.. but this doesnt solve my problem...

If radio button is outchecked, bg color dont change back.
I want only highlight active checked radio buton from group with same name.

Some idea?

Dean440
01-21-2010, 08:53 PM
Thnx for your advice.. but this doesnt solve my problem...

If radio button is outchecked, bg color dont change back.
I want only highlight active checked radio buton from group with same name.

Some idea?
Sure, have an onClick event handler in the radio button that calls to a function, passing the radio button as a parameter using (this). Then use the DOM to see if the parameter's "checked" property is true. Then you can determine the background color.

Old Pedant
01-21-2010, 09:00 PM
You need to put that code into *ALL* the radio buttons, with different color values for each one.

As I said, there is no way to "uncheck" a radio button, except by clicking on a *different* radio button.

Dean440
01-21-2010, 09:36 PM
You need to put that code into *ALL* the radio buttons, with different color values for each one.

As I said, there is no way to "uncheck" a radio button, except by clicking on a *different* radio button.

Wouldn't the best idea to just have each button call a "checkButtons" or "updateRadioButtons" function onClick, looping through all the buttons and assigning a (let's say white) background to all the unchecked ones, and then a unique (let's say red) background for the one that is checked?

Old Pedant
01-22-2010, 12:53 AM
<shrug>Yes.</shrug>

But if he wants all 3 buttons to change the background color, then it's simpler to just do as I say.

Would I change my tune if there were 32 buttons? For sure.

What about 5 buttons? ehhh....

I'm lazy. Whichever results in the least code.

Now, is that necessarily the best programming practice? Nope. Shame on me.

Actually, with the radio buttons he shows there, I might do this:

<script type="text/javascript">
var bgcolors = [ "white","yellow","lime","pink"];

function rbclick(which)
{
document.getElementById("whatever").style.backgroundColor = bgcolors[which.value];
}
</script>

<input type="radio" name="radio" id="radio" value="1" onclick="rbclick(this);" />
<input type="radio" name="radio" id="radio" value="2" onclick="rbclick(this);" />
<input type="radio" name="radio" id="radio" value="3" onclick="rbclick(this);" />

Now if you wanted white background for all except 2, just change the colors in the array to

var bgcolors = [ "white","white","lime","white"];

Easy instant control, centralized.

bgentry
03-29-2012, 05:42 PM
You can use jQuery to quickly and easily change all the background colors. You need to give each div a class. For example:


<div class="radio-button"><input type="radio" name="radio" id="radio" value="1" /> Active performer</div>
<div class="radio-button"><input type="radio" name="radio" id="radio" value="2" /> Poster</div>
<div class="radio-button"><input type="radio" name="radio" id="radio" value="3" /> Only attender</div>

Then, use a jQuery function with the click event:


jQuery(".productsection").click(function() {
jQuery(".radio-button").css("background-color","white")
jQuery(this).css("background-color","gray")})

When one radio button is clicked, this code will change the background color to white for all of the divs, then change the background color to gray for the div you want highlighted.

xelawho
03-29-2012, 08:08 PM
:confused: surely you're not suggesting loading the entire jQuery library just to do this...



<body>
<div style="background-color:#fff;"><input type="radio" name="radio" id="radio" onclick="changeBG(this.parentNode)" value="1" /> Active performer</div>
<div style="background-color:#fff;"><input type="radio" name="radio" id="radio" onclick="changeBG(this.parentNode)" value="2" /> Poster</div>
<div style="background-color:#fff;"><input type="radio" name="radio" id="radio" onclick="changeBG(this.parentNode)" value="3" /> Only attender</div>
<script type="text/javascript">
var changedDiv;
function changeBG(theNode){
if (changedDiv){changedDiv.style.backgroundColor="#fff"}
theNode.style.backgroundColor="#ccc"
changedDiv=theNode;
}
</script>
</body>

jamazing
07-25-2012, 09:42 PM
I know that no one has posted for a while, but I'm a new javascript-er and I could use some help with this.

xelawho's code worked well for me, but seems to be applying document wide. Is there a way to make this work when there are multiple radio button groups?

Old Pedant
07-26-2012, 01:25 AM
Start a new thread, please.

And show us an example of your web page with, as you wrote, "multiple radio button groups".

In other words, how does each group relate to what part of the page?