Checking / Unchecking multiple checkboxes onclick

[AndieR]

Hello!

I have say 3 different checkboxes (cat / dog / fish) in a page and five thumbnails of children pictures.

What I would like to do is to check or uncheck the animal checkboxes depending on which pets the children own without the page having to load again...

Like Peter has a dog and a fish while Jean has a cat.

I've been trying the code here but I can't seem to find a way to have one thumb select multiple checkboxes... just one. Any help would be greatly appreciated!

Regards,
AndieR

function checkABox(name) {
document.getElementsByName(name)[0].checked = true;
}

<input type="checkbox" name="fish"> <a href="#" onclick="return checkABox('fish')"> <img src="peter.jpg"> </a>

[jscheuer1]

Since each animal checkbox for the purposes of your example is a unique value, ID rather than NAME is more appropriate:

function checkABox(id) {
document.getElementById(id).checked = true; 
}

You will need to change name="fish", name="cat" etc. to id="fish", id="cat" and so on. Then use this type of onclick:

<a href="#" onclick="checkABox('fish');checkABox('cat');return false;"> <img src="peter.jpg"> </a>

you can add as many checkABox calls as you want, each separated with a semicolon. Just be sure to add the:

;return false;

at the end to stop the page from reloading (performs a similar function as the return prefix in your original code but, for multiple calls).