Grow your CSS skills. Land your dream job.

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

    http://www.premihersportswear.co.uk/pro … _entristar

    and heres the link to my js file

    http://www.premihersportswear.co.uk/rad … eplacer.js

    Mike

    # July 27, 2009 at 5:42 am
    Code:
    //change the radio button status and the replacement image
    function statusChange(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;
    }
    }

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

    Code:
    // JavaScript Document

    window.onload = init;

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

    function init() {
    replaceRadioButtons();
    }

    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
    img.id = '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.

*May or may not contain any actual "CSS" or "Tricks".