How to turn a (that's inside an svg) into a checkbox?

PART 1 - So I have a bunch of <circle>'s inside a SVG, and I want those circles to be checkboxes. And after that I want to:

PART 2 - When circle 1 (which is now a checkbox) is clicked, then it is checked. But all the other circles now get unchecked.

This is what I've already tried:

PART 1 - Turning the SVG into a checkbox:

<circle opacity="0.5" cx="842" cy="451.814" r="25.582" class="svg_spot" id="1" fill="#FFB60C" >
        <animate attributeName="r" values="25.582; 33; 25.582" keyTimes="0; 0.5; 1" begin="0s"  dur="1s" repeatCount="indefinite" calcMode="linear" />
        <input type="checkbox" id="spot1" name="spot" class="common_selector spot_id" value="spot1">   
</circle>

PART 2 -

$('input[name=spot]').click (function (){
        $(this).attr('checked', true);
        $('input[name=spot]').not(this).attr('checked', false);
});

Thanks for your time guys. Would appreciate any help!