radio button image replacement

  • # July 27, 2009 at 4:59 am

    hi. I am trying to replace my radio buttons with images. i have successfully done this, however, the radio buttons no longer function like radio buttons (i.e. they now function like check boxes.) does anyone have any ideas why? heres the link to the page … _entristar

    and heres the link to my js file … eplacer.js


    # July 27, 2009 at 5:42 am
    //change the radio button status and the replacement image
    function statusChange(i) {

    if(inputs[i].checked) {
    inputs[i].checked = ”;
    } else {
    inputs[i].checked = ‘checked’;

    Main issue is here…. whenever you change the status you need to loop threw all the radios and change them all to false….

    // JavaScript Document

    window.onload = init;

    //These variables define the links to the images which will replace the radio button states.
    var inputs[color=#FF0000],
    var imgFalse = ‘radioTest/images/datorixFalse.png’;
    var imgTrue = ‘radioTest/images/datorixTrue.png’;

    function init() {

    function replaceRadioButtons() {

    //select all input fields
    inputs = document.getElementsByTagName(‘input’);

    //for loop to go through all of the radio buttons
    for(var i=0; i < inputs.length; i++) { //if statement to check if the input type = radio if(inputs[i].getAttribute('type') == 'radio') { //getting the image id number so we can reset all of them radios[] = i; //create a new image var img = document.createElement('img'); //check if the radio button is checked if(inputs[i].checked) { img.src = imgTrue; //defined at top } else { img.src = imgFalse; //defined at top } //set image ID and onclick action = 'checkImage'+i; //set image img.onclick = new Function('statusChange('+i+')'); //place image in front of the radio button inputs[i].parentNode.insertBefore(img, inputs[i]); //hide the radio button inputs[i].style.display='none'; } } } //change the radio button status and the replacement image function statusChange(i) { // for loop goes threw and changes all the images to false for(var i=0; i < radios.length; i++) { document.getElementById('checkImage' + radios[i]).src=imgFalse; } // all the images are false now so we take the clicked image and go true........ inputs[i].checked = 'checked'; document.getElementById('checkImage'+i).src=imgTrue; }

    something like that…..

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.