1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Javascript Checkbox Images

Discussion in 'JavaScript' started by selfAfflicted, Jan 21, 2008.

  1. #1
    So I found this code while trying to get a script to have custom check box images.

    <script type="javascript">
    //global variables that can be used by ALL the function son this page.
    var inputs;
    var imgFalse = 'false.png';
    var imgTrue = 'true.png';
    
    //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;
    </script>
    Code (markup):
    The error comes up in this line of code:
        //cycle trough the input fields
        for(var i=0; i<inputs.length; i++) {
    Code (markup):
    Where i<inputs the less than sign is breaking the XML parser. I am not sure how to get past this, if it helps the error is "Invalid XML: A name contained an invalid character."

    Thanks.
     
    selfAfflicted, Jan 21, 2008 IP
  2. joebert

    joebert Well-Known Member

    Messages:
    2,150
    Likes Received:
    88
    Best Answers:
    0
    Trophy Points:
    145
    #2
    See the difference ?
    <script type="javascript">
    //<![CDATA[
    
    // ...
    
    //]]>
    </script>
    Code (markup):
     
    joebert, Jan 21, 2008 IP