Forum Moderators: not2easy
i was wondering if anyone could help me out here.
I have two radio buttons.
One button is marked as checked.
What i want to do is change the CSS style of the label text when either of the buttons is selected.
I have a feeling this will involve javascript.
If anyone could offer their insight i would be gratefull.
Thanks,
Lou
Please note that I'm using javascript code that I did not write, and do not know the licensing of...please visit the link and make note of the comments in the head of the script
<script>
//Custom JavaScript Functions by Shawn Olson
//Copyright 2004
//*******************************************function changecss(theClass,element,value) {
//documentation for this script at http://www.shawnolson.net/a/503/
var cssRules;
if (document.all) {
cssRules = 'rules';
}
else if (document.getElementById) {
cssRules = 'cssRules';
}
for (var S = 0; S < document.styleSheets.length; S++){
for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) {
if (document.styleSheets[S][cssRules][R].selectorText == theClass) {
document.styleSheets[S][cssRules][R].style[element] = value;
}
}
}
}</script>
<style>
.exampleA {
background-color: green;
}</style>
<table><tr><td class="exampleA">This is a test</td></tr></table>
<span class="exampleA">Example A</span>
<span class="exampleB">Example B</span>
<span class="exampleA">Example A</span>
<br />
<br /><form>
Change A Red: <input onClick="changecss('.exampleA','background','red')" name="" type="radio" value="Change A Red"><br />
Change A Blue: <input onClick="changecss('.exampleA','background','blue')" name="" type="radio" value="Change A Blue">
</form>
-Mike
[edited by: tedster at 7:39 am (utc) on July 13, 2005]
[edit reason] remove hot link [/edit]
that code has certainly got me so far!
The problem i have now is that it doesn't toggle between the two radio buttons, ie to unbold when the other is checked.
Forgive my lack of javascript knowledge but what would i do to toggle between the two so that only the checked one is bold?
see my adapted code below:
Thanks,
Lou
<script>
function changecss(theClass,element,value) {
var cssRules;
if (document.all) {
cssRules = 'rules';
}
else if (document.getElementById) {
cssRules = 'cssRules';
}
for (var S = 0; S < document.styleSheets.length; S++){
for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) {
if (document.styleSheets[S][cssRules][R].selectorText == theClass) {
document.styleSheets[S][cssRules][R].style[element] = value;
}
}
}
}
</script>
<style>
.exampleA {
font-weight:normal;
}
.exampleB{
font-weight:normal;}
</style>
</head>
<body>
<input type="radio" name="search-type" id="search1" onClick="changecss('.exampleA','font','bold')" value="this site" checked="checked"/>
<label for="search-type-this"><span class="south"><span class="exampleA">search all</span></label>
<input type="radio" name="search-type" id="search2" onClick="changecss('.exampleB','font','bold')" value="all Norfolk" />
<label for="search-type-all" ><span class="all"><span class="exampleB"> search specific</span></label>
[edited by: tedster at 7:44 am (utc) on July 13, 2005]
onClick="changecss('.exampleA','font','normal')"
*However, your code is, at first glance, only working in IE [it's not working in Firefox]. I think that the reason for this is that the the correct css property to make the font bold is 'font-weight', and not simply 'font'.
However, in fixing this error it ends up not working in any browser. So... if IE-only is a problem you are going to have to further research why that is the case.
-Mike
input[type=radio]:active + label { text-decoration: whatever; }that would only work if the label was after the input in the code, but for radio buttons that's usually the case.
i received a reply on the javascript board which gave me a solution that toggles the styles and it works in ie and firefox, for interest:
<script type="text/javascript"> function styleToggle(b) { for (var i = 0; i< b.form.length; i++) { if (b.form[i].name == b.name) { b.form[i].parentNode.style.fontWeight = b.form[i].checked? 'bold' : ''; } { b.form[i].parentNode.style.color = b.form[i].checked? '#993300' : ''; }} }
</script>
<input type="radio" name="searchsite" id="southnorfolksearch" value="south norfolk" onclick="styleToggle(this)" />
south norfolk</label>
<label for="allnorfolk" class="searchtext2">
<input type="radio" name="searchsite" id="allnorfolk" value="all norfolk" onclick="styleToggle(this)" />
all norfolk</label>
