Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2007
    Location
    Stamford, CT
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    custom radio button images

    I'm in need of a script to replace a series of radio buttons within a "single select" string of choices. What this means is, I need to replace 4 radio buttons with a custom "non" and "on" selected image, that is unique to each of the 4 buttons.

    Think of it this way: place 4 radio buttons in a row, and use a different "smiley" image to replace each button. When the user presses any of the four, a new "highlighted" image is seen. Obviously, only one of the four can be selected at any time, and there needs to be a function to toggle off the buttons that are not selected.

    I have a script that was able to replace a series of two radio buttons, but I'm totally stumped how to make it work with four.

    Would you be able to help?

    Best,

    porpoise

  • #2
    New Coder TripperTreats's Avatar
    Join Date
    Oct 2006
    Posts
    92
    Thanks
    0
    Thanked 0 Times in 0 Posts
    can you provide your code?
    Psychedelic digital art at www.trippertreats.com.

    "And in the end, the love you take
    is equal to the love you make
    ."

  • #3
    New to the CF scene
    Join Date
    Feb 2007
    Location
    Stamford, CT
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here you go:

    Code:
    <script>
    
    // this sets the buttons (images) to use
    var button1 = 'button1.jpg';
    var button2 = 'button2.jpg';
    var button1on = 'button1_on.jpg';
    var button2on = 'button2_on.jpg';
    // End of needed changes
    
    var inputs;
    
    function replaceChecks() {
        
        //get all the input fields on the page
        inputs = document.getElementsByName(whichQ);
    
        //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) {
                    
    				if(i==0)
    				  img.src = button1on;
    				else
    				  img.src = button2on;
    				
                } else {
                    if(i==0)
    				img.src = button1;
    				else
    				  img.src = button2;
                }
    
                //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';
            }
        }
    }
    
    function checkChange(i) {
    //alert(i);
        if(inputs[i].checked) {
            inputs[i].checked = '';
    	  if(i==0)
            document.getElementById('checkImage'+i).src= button1;
    	  else 
    	  document.getElementById('checkImage'+i).src= button2;
    		
        } else {
            inputs[i].checked = 'checked';
    		if(i==0){
    		document.getElementById('checkImage'+0).src= button1on;
    		document.getElementById('checkImage'+1).src= button2;
    		}
    		if(i==1){
    		document.getElementById('checkImage'+0).src= button1;
    		document.getElementById('checkImage'+1).src= button2on;
    		}
    				
        }
    }
    
    setTimeout("replaceChecks()", 0);	
    
    </script>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •