Checkbox input replacement with javascript conditional selection

Have been using a script to replace checkbox with images which works fine.  Now need to be able to do a conditional select (which works fine without the image replacement script). When the user selects Option1 then Option 2 and 3 are automatically selected.  Any ideas?

<HTML>
<HEAD>
<SCRIPT type=text/javascript>
//global variables that can be used by ALL the function son this page.
var inputs;
var imgFalse = 'chk_off.png';
var imgTrue = 'chk_on.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>
<script>
function check1(){
    if (form1.Hide_Theme.checked) {
       document.form1.Hide_Layout.checked=true
         document.form1.Hide_Image.checked=true
    } }
</script>
</HEAD>
<BODY>

<FORM name="form1" action="" method=get>
<INPUT type=checkbox value=test1 name="Hide_Theme" id="Hide_Theme" onClick="check1()">Option 1<BR>
<INPUT type=checkbox value=test2 name="Hide_Layout" id="Hide_Layout">Option 2<BR>
<INPUT type=checkbox value=test3 name="Hide_Image" id="Hide_Image">Option 3<BR>
</FORM>
</BODY>
</HTML>
daimo1Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

djon2003Senior software engineerCommented:
Try this instead :
img.onclick = new Function(return checkChange(i));

Open in new window

daimo1Author Commented:
Hi djon

Where do I put this code and how does it work?

Thanks
D
djon2003Senior software engineerCommented:
Replace your actual

                  //set image
                  img.onclick = new Function('checkChange('+i+')');

 by the code I post you.

Try it out, if it works.. I'll explain why
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

daimo1Author Commented:
Sorry Djon but it doesn't work.  The javascript condition works but the image replacement no longer shows.
djon2003Senior software engineerCommented:
Could you try to add an alert in the CheckChange function.

alert the i variable.
daimo1Author Commented:
Added a couple of alerts to the CheckChange function but it does not work as the line you suggested changing has disabled the script.

function checkChange(i) {
      if(inputs[i].checked) {
            inputs[i].checked = '';
            document.getElementById('checkImage'+i).src=imgFalse;
            alert ("imgFalse");
      } else {
            inputs[i].checked = 'checked';
            document.getElementById('checkImage'+i).src=imgTrue;
            alert ("imgTrue");
      }
}
djon2003Senior software engineerCommented:
Excuse me.. i mistaken the code.. it should be:
img.onclick = new Function() {return checkChange(i);};

Open in new window

daimo1Author Commented:
No difference.  Still no images or alerts.
djon2003Senior software engineerCommented:
add an alert as first line of the checkChange function.. oh yeah.. rename Function for function
daimo1Author Commented:
Get the alert but no images.
djon2003Senior software engineerCommented:
Well, you are really near it. From what i see, it should work. is the i variable good when clicking ?
daimo1Author Commented:
The conditional bit still works but the image replacement still doesn't.

Getting the error 'null or not an object' with the lines:
document.getElementById('checkImage'+i).src=imgTrue; and
document.getElementById('checkImage'+i).src=imgTrue;
djon2003Senior software engineerCommented:
Can you alert the i variable please .. Is it ok ??? If yes, then your images don't exist on the page or the id is not correctly set. If no.. I'll look deeper.
daimo1Author Commented:
No variable.  The images are fine as the input replacement works without the conditional selection.
djon2003Senior software engineerCommented:
Maybe chaning (if(inputs[i].checked) {) --> (if(inputs[i].checked == true) {)
daimo1Author Commented:
Nope still getting the same error.
djon2003Senior software engineerCommented:
Ensure the i variable is Ok..

Is your code like this :
function checkChange(i) {
alert(i);

Open in new window

daimo1Author Commented:
Get the alert when refreshing the page (variable = 0)
When page loads also get the 'document.getElementById' error.
Don't get an alert when selecting any of the checkboxes.
djon2003Senior software engineerCommented:
Ok, here is what you will do.

- Ensure to have ids to your inputs checkboxes
- Change the naming convention of the image to the same id as input + "Img"
- Change the onclick to the only have = checkChanged;
- Update the checkChanged function to (function checkChanged(event))
- In your function, you will be able to use the event.srcElement to get to element that fires the event (which is your image). So to acces the input, get the element by his id with the image id using substr to remove "Img".

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.