PDA

View Full Version : Modify Code For Radio Buttons



Troy297
Mar 28th, 2007, 02:43 AM
Hey All,

I have some code I use currently for styling my checkboxes but now I need to do the same for radio buttons... I can get it to work but the radio buttons behave like checkboxes. Would anyone be able to modify it for radio buttons?


//global variables that can be used by ALL the function son this page.
var inputs;
var imgFalse = 'images/false2.gif';
var imgTrue = 'images/true2.gif';

//this function runs when the page is loaded, put all your other onload stuff in here too.
function init() {
replaceChecks();
}

function replaceChecks() {

//get all the input fields on the page
inputs = document.getElementsByTagName('input');

//cycle trough the input fields
for(var i=0; i < inputs.length; i++) {

//check if the input is a checkbox
if(inputs[i].getAttribute('type') == 'checkbox') {

//create a new image
var img = document.createElement('img');

//check if the checkbox is checked
if(inputs[i].checked) {
img.src = imgTrue;
} else {
img.src = imgFalse;
}

//set image ID and onclick action
img.id = 'checkImage'+i;
//set image
img.onclick = new Function('checkChange('+i+')');
//place image in front of the checkbox
inputs[i].parentNode.insertBefore(img, inputs[i]);

//hide the checkbox
inputs[i].style.display='none';
}
}
}

//change the checkbox status and the replacement image
function checkChange(i) {

if(inputs[i].checked) {
inputs[i].checked = '';
document.getElementById('checkImage'+i).src=imgFalse;
} else {
inputs[i].checked = 'checked';
document.getElementById('checkImage'+i).src=imgTrue;
}
}

window.onload = init;

Thanks in advance :thumbsup:

Mr J
Mar 28th, 2007, 09:58 AM
Give this a try


//global variables that can be used by ALL the function son this page.
var inputs;
var imgFalse = 'images/false2.gif';
var imgTrue = 'images/true2.gif';

//this function runs when the page is loaded, put all your other onload stuff in here too.
function init() {
replaceChecks();
}

function replaceChecks() {

//get all the input fields on the page
inputs = document.getElementsByTagName('input');

//cycle trough the input fields
for(var i=0; i < inputs.length; i++) {

//check if the input is a checkbox
if(inputs[i].getAttribute('type') == 'radio') {

//create a new image
var img = document.createElement('img');

//check if the checkbox is checked
if(inputs[i].checked) {
img.src = imgTrue;
} else {
img.src = imgFalse;
}

//set image ID and onclick action
img.id = 'checkImage'+i;
//set image
img.onclick = new Function('checkChange('+i+')');
//place image in front of the checkbox
inputs[i].parentNode.insertBefore(img, inputs[i]);

//hide the checkbox
inputs[i].style.display='none';
}
}
}

lastInput=0
function checkChange(i){

inputs[i].checked=true
document.getElementById('checkImage'+i).src=imgTrue

if(lastInput != i){
document.getElementById('checkImage'+lastInput).src=imgFalse
}

lastInput = i
}

window.onload = init;

des55
Mar 28th, 2007, 04:50 PM
Mr J,

I've attempted the adjusted code, but now the radio buttons do not switch OR click back, they stay resident as an "on" radio button once clicked. I will attach code if you would like to see the page. I'm actually trying to utilize a "universal javascript" that works for radio button images and checkbox images--thoughts? I'm also trying to enable the "link/text" beside the respective button/boxes to trigger the action--hope not asking too much? :)

Your help is greatly appreciated--and thank you.

Des

ps. image examples for the checkboxes and the radio buttons:

checkbox (on) (http://www.labradordesigns.com/images/true1.gif)
checkbox (off) (http://www.labradordesigns.com/images/false1.gif)
radio button (on) (http://www.labradordesigns.com/images/true2.gif)
radio button (off) (http://www.labradordesigns.com/images/false2.gif)



____________________________________________________________

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

<script type="text/javascript">
<!--

//global variables that can be used by ALL the function son this page.
var inputs;
//var imgFalse = 'images/false2.gif';
//var imgTrue = 'images/true2.gif';

var imgFalse = 'images/radio_off1.gif';
var imgTrue = 'images/radio_on1.gif';

//this function runs when the page is loaded, put all your other onload stuff in here too.
function init() {
replaceChecks();
}

function replaceChecks() {

//get all the input fields on the page
inputs = document.getElementsByTagName('input');

//cycle trough the input fields
for(var i=0; i < inputs.length; i++) {

//check if the input is a checkbox
if(inputs[i].getAttribute('type') == 'radio') {

//create a new image
var img = document.createElement('img');

//check if the checkbox is checked
if(inputs[i].checked) {
img.src = imgTrue;
} else {
img.src = imgFalse;
}

//set image ID and onclick action
img.id = 'checkImage'+i;
//set image
img.onclick = new Function('checkChange('+i+')');
//place image in front of the checkbox
inputs[i].parentNode.insertBefore(img, inputs[i]);

//hide the checkbox
inputs[i].style.display='none';
}
}
}

lastInput=0
function checkChange(i){

inputs[i].checked=true
document.getElementById('checkImage'+i).src=imgTrue

if(lastNum != i){
document.getElementById('checkImage'+lastInput).src=imgFalse
}

lastInput = i
}

window.onload = init;
//-->
</script>



</head>

<body>

<div>
<p><input type="radio" name="radiogroup" value="radio1" /> <a href="#" alt="can this link be clicked to trigger activity of button?"><font size="1">radio button 1</font></a></p>
<p><input type="radio" name="radiogroup" value="radio2" /> <a href="#" alt="can this link be clicked to trigger activity of button?"><font size="1">radio button 2</font></a></p>
<p><input type="radio" name="radiogroup" value="radio3" /> <a href="#" alt="can this link be clicked to trigger activity of button?"><font size="1">radio button 3</font></a></p>
</div>

<br><br>

<div>
<p><input type="checkbox" name="checkboxName" value="checkbox1" /> <a href="#" alt="can this link be clicked to trigger activity of button?"><font size="1">checkbox 1</font></a></p>
<p><input type="checkbox" name="checkboxName" value="checkbox2" /> <a href="#" alt="can this link be clicked to trigger activity of button?"><font size="1">checkbox 2</font></a></p>
<p><input type="checkbox" name="checkboxName" value="checkbox3" /> <a href="#" alt="can this link be clicked to trigger activity of button?"><font size="1">checkbox 3</font></a></p>
</div>

</body>
</html>

Mr J
Mar 28th, 2007, 09:17 PM
My apologies, I appear to have dropped a couple of clangers in my last post, which I've corrected, anyway have a play around with this example.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

<script type="text/javascript">
<!--

//global variables that can be used by ALL the function son this page.
var inputs;
var radFalse = 'images/false2.gif';
var radTrue = 'images/true2.gif';
var chkFalse = 'images/false1.gif';
var chkTrue = 'images/true1.gif';

//this function runs when the page is loaded, put all your other onload stuff in here too.
function init() {
replaceChecks();
}

function replaceChecks() {

inputs = document.getElementsByTagName('input'); //get all the input fields on the page

for(var i=0; i < inputs.length; i++){ //cycle trough the input fields

if(inputs[i].getAttribute('type') == 'radio'){ //check if the input is a checkbox

var img = document.createElement('img'); //create a new image
img.alt=i
if(inputs[i].checked) { //check if the radio is checked
img.src = radTrue;
}
else{
img.src = radFalse;
}

img.id = 'checkImage'+i; //set image ID and onclick action
img.onclick = new Function('changeRads('+i+')'); //set image

newLink = document.createElement('A');
newLink.setAttribute("href","#null")
newLinkTxt=document.createTextNode("Radio Button"+i)
newLink.i=i
newLink.onclick=function(){changeRads(this.i)}
newLink.style.fontSize="10px"



inputs[i].parentNode.insertBefore(img, inputs[i]); //place image in front of the checkbox
newLink.appendChild(newLinkTxt)
inputs[i].parentNode.insertBefore(newLink, inputs[i]);
inputs[i].style.display='none'; //hide the checkbox

}

if(inputs[i].getAttribute('type') == 'checkbox'){ //check if the input is a checkbox

var img = document.createElement('img');
img.alt=i
if(inputs[i].checked) {
img.src = chkTrue;
}
else{
img.src = chkFalse;
}

img.id = 'checkImage'+i;
img.onclick = new Function('changeChks('+i+')');

newLink = document.createElement('A');
newLink.setAttribute("href","#null")
newLinkTxt=document.createTextNode("Checkbox "+(i-2))
newLink.i=i
newLink.onclick=function(){changeChks(this.i)}
newLink.style.fontSize="10px"

inputs[i].parentNode.insertBefore(img, inputs[i]);
newLink.appendChild(newLinkTxt)
inputs[i].parentNode.insertBefore(newLink, inputs[i]);
inputs[i].style.display='none';

}

}

}

lastInput=0
function changeRads(i){
inputs[i].checked=true
document.getElementById('checkImage'+i).src=radTrue
if(lastInput != i){
document.getElementById('checkImage'+lastInput).src=radFalse
}
lastInput = i

//alert(inputs[i].value)
}

function changeChks(i){
if(inputs[i].checked==true){
inputs[i].checked=false
document.getElementById('checkImage'+i).src=chkFalse
}
else{
inputs[i].checked=true
document.getElementById('checkImage'+i).src=chkTrue
}

}

function getValues(){

inputs = document.getElementsByTagName('input')

for(var i=0; i < inputs.length; i++){
if(inputs[i].checked){
alert(inputs[i].value+" is selected")
}

}

}
window.onload = init;
//-->
</script>

</head>
<body>

<div id="myinputs0">
<p><input type="radio" name="radiogroup" value="radio1" /></p>
<p><input type="radio" name="radiogroup" value="radio2" /></p>
<p><input type="radio" name="radiogroup" value="radio3" /></p>
</div>

<br><br>

<div id="myinputs1">
<p><input type="checkbox" name="checkboxName1" value="checkbox1" /></p>
<p><input type="checkbox" name="checkboxName2" value="checkbox2" /></p>
<p><input type="checkbox" name="checkboxName3" value="checkbox3" /></p>
</div>

<a href="#null" onclick="getValues()">Results</a>

</body>
</html>

des55
Mar 28th, 2007, 09:35 PM
Perhaps I shall call you DR. J versus MR. J ... it works like a charm for FF, IE and NS. Thanks so much for your expertise! I hope you don't mind my calling you up from time to time to pick your brain.

Des

ps. I was able to race around on your site--nice reference site I must say!

Mr J
Mar 29th, 2007, 11:07 AM
In my previous posts the script has always referenced the inputs in their ordinal number within the page this could mean that the addition of more inputs in the wrong order could easily break the script.

In the following example the script only references the inputs in the specified divs.

I thought before I wrapped this up I'd post it just in case


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

<script type="text/javascript">
<!--

var inputs;
var radFalse = 'images/false2.gif'
var radTrue = 'images/true2.gif'
var chkFalse = 'images/false1.gif'
var chkTrue = 'images/true1.gif'

//this function runs when the page is loaded, put all your other onload stuff in here too.
function init() {
replaceChecks();
}

function replaceChecks() {
count=0
while(document.getElementById("myinputs"+count)){
el=document.getElementById("myinputs"+count)

inputs = el.getElementsByTagName('input') //get all the input fields within current div

for(var i=0; i < inputs.length; i++){ //cycle through the input fields

if(inputs[i].getAttribute('type') == 'radio'){ // if the input is a radio button

newImg = document.createElement('IMG')
newImg.id = 'radImage'+i
newImg.i=i
newImg.onclick = function(){changeRads(this.i)}

if(inputs[i].checked){newImg.src = radTrue}
else{newImg.src = radFalse}

inputs[i].parentNode.insertBefore(newImg, inputs[i])
inputs[i].style.display='none'
}

if(inputs[i].getAttribute('type') == 'checkbox'){ // if the input is a checkbox

newImg = document.createElement('IMG')
newImg.id = 'chkImage'+i
newImg.i=i
newImg.onclick = function(){changeChks(this.i)}

if(inputs[i].checked){newImg.src = chkTrue}
else{newImg.src = chkFalse}

inputs[i].parentNode.insertBefore(newImg, inputs[i])
inputs[i].style.display='none'
}

}

count++
}

}

lastInput=0
function changeRads(i){
el=document.getElementById("myinputs0").getElementsByTagName('input')
el[i].checked=true
document.getElementById('radImage'+i).src=radTrue
if(lastInput != i){
document.getElementById('radImage'+lastInput).src=radFalse
}
lastInput = i
}

function changeChks(i){
el=document.getElementById("myinputs1").getElementsByTagName('input')
if(el[i].checked==true){
el[i].checked=false
document.getElementById('chkImage'+i).src=chkFalse
}
else{
el[i].checked=true
document.getElementById('chkImage'+i).src=chkTrue
}
}

function getValues(){
inputs = document.getElementsByTagName('input')
for(var i=0; i < inputs.length; i++){
if(inputs[i].checked){
alert(inputs[i].value+" is selected")
}
}
}
window.onload = init
//-->
</script>

<style type="text/css">

#myinputs0 a{
position:relative;
top:-7px;
margin-left:5px;
}

#myinputs1 a{
margin-left:5px;
}

</style>

</head>
<body>

<div id="myinputs0" style="font-size:10px">
<p><input type="radio" name="radiogroup" value="radio1" /><a href="#null" onclick="changeRads(0)">Radio 1</a></p>
<p><input type="radio" name="radiogroup" value="radio2" /><a href="#null" onclick="changeRads(1)">Radio 2</a></p>
<p><input type="radio" name="radiogroup" value="radio3" /><a href="#null" onclick="changeRads(2)">Radio 3</a></p>
</div>

<br><br>

<div id="myinputs1" style="font-size:10px">
<p><input type="checkbox" name="checkboxName1" value="checkbox1" /><a href="#null" onclick="changeChks(0)" style>Checkbox 1</a></p>
<p><input type="checkbox" name="checkboxName2" value="checkbox2" /><a href="#null" onclick="changeChks(1)">Checkbox 2</a></p>
<p><input type="checkbox" name="checkboxName3" value="checkbox3" /><a href="#null" onclick="changeChks(2)">Checkbox 3</a></p>
</div>

<a href="#null" onclick="getValues()">Results</a>

</body>
</html>

des55
Mar 29th, 2007, 03:11 PM
Mr. J,

After testing the previous version and the current version you posted, everything works fine--almost. After testing and refreshing the page multiple times (after various checkboxes are checked and a radio button is checked) ... I have found that sometimes the "checked" radio button holds or is still selected even when I go to chose another radio button (this after multiple refreshes)--does that make sense?

Mr J
Mar 29th, 2007, 04:59 PM
In the script look for this code

if(inputs[i].checked){newImg.src = radTrue}
else{newImg.src = radFalse}

and change for this

if(inputs[i].checked){
newImg.src = radTrue
lastInput=i
}
else{
newImg.src = radFalse
}

des55
Mar 29th, 2007, 05:13 PM
Thanks so much for you assistance and patience!

Mr J
Mar 29th, 2007, 07:20 PM
Thanks.

I think the reason the problem occurred was because there wasn't a radio selected by default still , alls well that ends well, as they say