Toggle checkbox if displayed in table

I have a table with some rows and columns. And there is an image which is representing a checkbox in each row and column. Basically upon clicking on the image, it would select that check box (image selector).

What I wanted to do is when I click on one image(checkbox), the rest becomes hidden and clicking it again would show the rest (toggle).

Here is demo table.

<table>
<tbody>
    <tr><td><label><input name="sign-reason" type="checkbox" value="damaged" class="sign-reason"><img src="../../css/signs/cantilever.png" class="sign_selector" rel="{cantilever}"><label></label></label></td><td><label><input name="sign-reason" type="checkbox" value="damaged" class="sign-reason"><img src="../../css/signs/950x300.png" class="sign_selector" rel="{950x300}"><label></label></label></td><td><label><input name="sign-reason" type="checkbox" value="damaged" class="sign-reason"><img src="../../css/signs/1300x370.png" class="sign_selector" rel="{1300x370}"><label></label></label></td></tr>



    <tr><td><label><input name="sign-reason" type="checkbox" value="damaged" class="sign-reason"><img src="../../css/signs/1000x300freestanding.png" class="sign_selector" rel="{1000x300fs}"><label></label></label></td><td>&nbsp;</td><td><label><input name="sign-reason" type="checkbox" value="damaged" class="sign-reason"><img src="../../css/signs/1100x300.png" class="sign_selector" rel="{1100x300}"><label></label></label></td></tr>


    </table>

Here is My JQUERY

<script>
    $(document).ready(function() {

    $('.sign-reason').change(function() {

        $(this).parent('td').siblings().toggle();

    });

}); 
</script>   

Is it possible when i click on image, all other images become hidden and clicking again would show the images.

Many Thanks