click on svg path to select html checkbox?

I've been trying to solve this for way too long now - I need your help. I'm a total noob when it comes to this stuff, but hey, it's kind of fun. I tried to phrase this question as clearly as possible, but please give me some noob bonus if I failed. Sorry!

I've got a relatively complex svg depicting a cell embedded into my html page via an tag. If you hover over certain paths of the svg (e.g. the nucleus), I've already managed to get them to change colour, and I've added a tooltip which shows a tiny window with a bit of text. So far so good.

I've also got a bunch of simple html checkboxes which are related to the svg (i.e. they are labelled 'nucleus' etc). All clicking on these checkboxes does is to set their value to 1.

Now, what I really want to achieve is to be able to click on a svg path (e.g. nucleus) which then

1) changes the color of the path - this I've managed to do with a simple function:

function buttonClick(evt){
    document.getElementById("nucleus").style["fill"] = "yellow"; 
}

and then a

onmouseup="buttonClick(evt)"

in the corresponding path.

2) selects the corresponding checkbox. (My supervisor likes to be on the safe side and is all about browser compatibility so he wants the plain checkboxes as a backup, so unfortunately I can't just hide them behind the svg or something like that...)

3) On second click, everything needs to be reversed/unselected

Now, is that possible?

My fingers are bleeding from typing various searches, but all I could find was: - how to replace a checkbox by an entire image (not what I need, just a svg path) OR - how to make style checkboxes in svg/css. (Nice, but also not what I need) OR - how to select a checkbox in jquery. I've tried this

$('.comp_nuc')[0].checked = true;

but it doesn't seem to do anything.

Really, any hints appreciated... Thanks heaps!