click on svg path to select html checkbox?
<p>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. </p>

<p>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. </p>

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

<ol>
<li><p>changes the color of the path - this I've managed to do with a simple function:</p>

<pre><code>function buttonClick(evt){
    document.getElementById("nucleus").style["fill"] = "yellow"; 
}
</code></pre>

<p>and then a </p>

<pre><code>onmouseup="buttonClick(evt)"
</code></pre>

<p>in the corresponding path. </p></li>
<li><p>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...)</p></li>
<li><p>On second click, everything needs to be reversed/unselected</p></li>
</ol>

<p>Now, is that possible? </p>

<p>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</p>

<pre><code>$('.comp_nuc')[0].checked = true;
</code></pre>

<p>but it doesn't seem to do anything.</p>