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