Simple toggle query
<p>Look at this sample code:</p>

<pre><code>&lt;a class="change" href="#" id="swap01"&gt;&lt;img src="off.gif"&gt;&lt;/a&gt;&lt;/div&gt;
&lt;a class="change" href="#" id="swap02"&gt;&lt;img src="off.gif"&gt;&lt;/a&gt;&lt;/div&gt;
&lt;a class="change" href="#" id="swap03"&gt;&lt;img src="off.gif"&gt;&lt;/a&gt;&lt;/div&gt;

&lt;form&gt;
&lt;input type="hidden" name="field01" value="0" /&gt;
&lt;input type="hidden" name="field02" value="0" /&gt;
&lt;input type="hidden" name="field03" value="0" /&gt;
&lt;/form&gt;
</code></pre>

<p>What I want to happen is that, for example, if I click on the image link within <strong>swap02</strong>:</p>

<p>1) The image source for that link changes from <strong>off.gif</strong> to <strong>on.gif</strong><br />
2) The corresponding hidden field in the form (<strong>field02</strong>) changes from <strong>0</strong> to <strong>1</strong>.</p>

<p>When I click the same link again, it reverts back to <strong>off.gif</strong> and <strong>0</strong>.</p>

<p>Just three are given as an example, but this needs to be scalable (up to 99 items).</p>

<p>Thanks a lot. :)</p>
