Replace checkboxes with images

I am not a javascript expert, I am probably lower then a newbie. Here it goes, I am working with phpbb and javascript. My goal is to replace the checkboxes that are used by phpbb3 software with my own. I am using this program

   1.
      var inputs;
   2.
      var imgFalse = "styles/1stAttempt/imageset/false.gif";
   3.
      var imgTrue = "styles/1stAttempt/imageset/true.gif";
   4.
       
   5.
      //this function runs when the page is loaded, put all your other onload stuff in here too.
   6.
      function init() {
   7.
          replaceChecks();
   8.
      }
   9.
       
  10.
      function replaceChecks() {
  11.
         
  12.
          //get all the input fields on the page
  13.
          inputs = document.getElementsByTagName('input');
  14.
       
  15.
          //cycle trough the input fields
  16.
          for(var i=0; i < inputs.length; i++) {
  17.
       
  18.
              //check if the input is a checkbox
  19.
              if(inputs[i].getAttribute('type') == 'checkbox') {
  20.
       
  21.
                 
  22.
                  //create a new image
  23.
                  var img = document.createElement('img');
  24.
                 
  25.
                  //check if the checkbox is checked
  26.
                  if(inputs[i].checked) {
  27.
                      img.src = imgTrue;
  28.
                  } else {
  29.
                      img.src = imgFalse;
  30.
                  }
  31.
       
  32.
                  //set image ID and onclick action
  33.
                  img.id = 'checkImage'+i;
  34.
                  //set image
  35.
                  img.onclick = new Function('checkChange('+i+')');
  36.
                  //place image in front of the checkbox
  37.
                  inputs[i].parentNode.insertBefore(img, inputs[i]);
  38.
                 
  39.
                  //hide the checkbox
  40.
                  inputs[i].style.display='none';
  41.
              }
  42.
          }
  43.
      }
  44.
       
  45.
      //change the checkbox status and the replacement image
  46.
      function checkChange(i) {
  47.
       
  48.
          if(inputs[i].checked) {
  49.
              inputs[i].checked = '';
  50.
              document.getElementById('checkImage'+i).src=imgFal  se;
  51.
          } else {
  52.
              inputs[i].checked = 'checked';
  53.
              document.getElementById('checkImage'+i).src=imgTru  e;
  54.
          }
  55.
      }
  56.
       
  57.
      window.onload = init;

Code (markup):

(This is not my code it is open source)
to intitally change the checkboxes and then switch any single one I click on. (THIS WORKS) It post a new image and hides the original but moves it to the right found this out when I took away the hide code.

For check all I use this script

   1.
      function marklist(id, name, state)
   2.
      {
   3.
          var parent = document.getElementById(id);
   4.
          if (!parent)
   5.
          {
   6.
              eval('parent = document.' + id);
   7.
          }
   8.
       
   9.
          if (!parent)
  10.
          {
  11.
              return;
  12.
          }
  13.
       
  14.
          var rb = parent.getElementsByTagName('input');
  15.
         
  16.
          for (var r = 0; r < rb.length; r++)
  17.
          {
  18.
              if (rb[r].name.substr(0, name.length) == name)
  19.
              {
  20.
                  rb[r].checked = state;
  21.
              }
  22.
          }
  23.
      }

Code (markup):

Then run the first script. What occurs is that it makes another row of images and it does it everytime I press the button. I know it does this because it moves the original checkbox over but I am not sure how to fix the problem. Anyone have any ideas that they would care to devulge. Thank you in advance.

The code I use to call marklist function is:

   1.
      <b class="gensmall"><a href="javascript:marklist('viewfolder', 'marked_msg_id', true); replaceChecks();">{L_MARK_ALL}</a> :: <a href="javascript:marklist('viewfolder', 'marked_msg_id', false); replaceChecks();">{L_UNMARK_ALL}

Code (markup):