HOw to turn svg groups into clickable checkboxes without the checkbox (invert color on click to show selected)

Question

I have an image with 12 blocks, each will have a pic and when clicked invert color to show selected.Is it possibler to get the box to act like a checkbox?

How can I attach the svg code with a form checkbox? I have encased each block with a JavaScript alert just as an example

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">

<a xlink:href="javascript:alert(&apos;12&apos;)" >
<title>12</title>
<g id="XMLID_5_" name="">
    <path id="XMLID_93_" class="st0" d="M831.5,259.3c0,1-0.1,1.9-0.1,2.9c0,42.9,0,85.8,0,128.6c0,3.3,0.5,2.8-2.7,2.8
        c-46.6,0-93.1,0-139.7,0c-0.8,0-1.6,0-2.4,0c-0.6-0.8-0.3-1.7-0.3-2.6c0-43.3,0-86.6,0-129.9c0-0.8-0.5-1.8,0.4-2.4
        c0.8,0,1.6,0.1,2.4,0.1c46.4,0,92.7,0,139.1,0c0.9,0,1.8-0.1,2.6-0.1C831.2,258.9,831.4,259.1,831.5,259.3z"/>
    <path id="XMLID_79_" class="st1" d="M686.8,258.8c-0.3,0.8-0.2,1.6-0.2,2.4c0,43.6,0,87.2,0,130.8c0,0.6,0,1.1,0.1,1.7
        c-0.4-0.2-0.5-0.6-0.5-1c0-0.6,0-1.1,0-1.7c0-43.1,0-86.2,0-129.3C686.1,260.7,685.5,259.5,686.8,258.8z"/>
    <path id="XMLID_73_" class="st2" d="M831.5,259.3c-0.2-0.2-0.4-0.3-0.6-0.5C831.2,258.9,831.4,259,831.5,259.3z"/>
</g>
</a>
</g>
</svg>

and my form is like basic

  <input type="checkbox" name="12" value="damaged">

Is it possibler to get the box to act like a checkbox and place a value in name so I can use a form to send data??? Is it possible to covert or combine the checkboxes to the svg squares that u can click on the would register the click on the server as checked which would be a damaged value and if not checked they are not damaged? I tried the foreignObject tag with no luck as u can see.
How can I add checkbox and name values to a G tag? Can something like this even be done? I can do the same an image map but the positions don't act responsive and the JavaScript. has not been updated or maintained.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#ED1C24;}
    .st1{fill:#FEFDFD;}
    .st2{fill:#FEFEFE;}
    #test{color:green;}
</style>
<g id="XMLID_2_">












    <a xlink:href="javascript:alert(&apos;1&apos;)" >
<title>1</title>
    <g id="XMLID_11_">
        <path id="XMLID_100_" class="st0" d="M244,772.2c-0.4,0.8-0.2,1.6-0.2,2.4c0,43,0,86.1,0,129.1c0,0.8-0.2,1.6,0.2,2.4
            c-0.4,0.9-1.3,0.5-1.9,0.5c-47.3,0-94.6,0-141.9,0c-0.5,0-1.1,0.1-1.6-0.2c0-44.8,0-89.6,0-134.4c0.8-0.4,1.7-0.2,2.6-0.2
            c46.7,0,93.5,0,140.2,0C242.3,771.7,243.3,771.2,244,772.2z"/>
        <path id="XMLID_99_" class="st1" d="M244,772.2c-0.9-0.8-2-0.5-3-0.5c-20.6,0-41.3,0-61.9,0c-25.9,0-51.8,0-77.7,0
            c-0.9,0-1.9-0.2-2.8,0.2c0-0.2,0-0.3,0-0.5c47.6,0,95.1,0,142.7,0C242.2,771.5,243.4,770.9,244,772.2z"/>
        <path id="XMLID_98_" class="st1" d="M98.6,906.3c0.9,0,1.8,0.1,2.6,0.1c46.6,0,93.2,0,139.7,0c1,0,2.1,0.3,3-0.4
            c-0.2,0.5-0.6,0.7-1.1,0.8c-0.7,0-1.4,0-2.2,0c-47.4,0-94.8,0-142.2,0C98.6,906.6,98.6,906.5,98.6,906.3z"/>
    </g>
    </a>
    
    
    
    
    
    
    
    
    
    
    
    
    
        <a xlink:href="javascript:alert(&apos;2&apos;)" >
<title>2</title>
    
    
    <g id="XMLID_6_">
        <path id="XMLID_94_" class="st0" d="M736.6,504.1c1,0,1.9,0.1,2.9,0.1c46.2,0,92.4,0,138.6,0c3.2,0,2.8-0.4,2.8,2.8
            c0,44,0,87.9,0,131.9c-0.7,0.5-1.6,0.3-2.3,0.3c-46.7,0-93.5,0-140.2,0c-0.8,0-1.8,0.6-2.4-0.5c0.4-0.8,0.2-1.6,0.2-2.4
            c0-43,0-86.1,0-129.1c0-0.8,0.2-1.6-0.2-2.4C736.1,504.5,736.3,504.2,736.6,504.1z"/>
    </g>
    
    
        </a>
    
    
    
    
    
    
            <a xlink:href="javascript:alert(&apos;3&apos;)" >
<title>3</title>
    
    
    <g id="XMLID_1_">
        <path id="XMLID_89_" class="st0" d="M121.2,276.3c0.4-0.8,0.2-1.6,0.2-2.4c0-43,0-86.1,0-129.1c0-0.8,0.2-1.6-0.2-2.4
            c0.4-0.9,1.3-0.5,1.9-0.5c47,0,94.1,0,141.1-0.1c1.9,0,2.2,0.6,2.2,2.3c0,43.4,0,86.9,0,130.3c0,1.7-0.3,2.3-2.2,2.3
            c-47-0.1-94.1,0-141.1-0.1C122.4,276.8,121.6,277.2,121.2,276.3z"/>
        <path id="XMLID_87_" class="st1" d="M121.2,276.3c0.7,0.5,1.5,0.4,2.3,0.4c46.9,0,93.7,0,140.6,0c0.2,0,0.5,0,0.7,0
            c1,0.1,1.5-0.2,1.4-1.3c-0.1-0.5,0-1,0-1.4c0-43.1,0-86.2,0-129.3c0-3,0.4-2.7-2.7-2.7c-46.5,0-92.9,0-139.4,0c-1,0-2.1-0.3-3,0.5
            c0.2-0.5,0.6-0.7,1.1-0.7c0.6,0,1.3,0,1.9,0c46.4,0,92.8,0,139.2,0c3.5,0,3.2-0.3,3.2,3.2c0,43,0,85.9,0,128.9
            c0,3.5,0.3,3.2-3.2,3.2c-46.4,0-92.8,0-139.2,0C123.2,277,121.9,277.6,121.2,276.3z"/>
    </g>
    
    
    
    
        </a>
    
    
    
    
            <a xlink:href="javascript:alert(&apos;4&apos;)" >
<title>4</title>
    
    <g id="XMLID_8_">
        <path id="XMLID_91_" class="st0" d="M567.5,296.9c0,0.8-0.1,1.6-0.1,2.4c0,43.1,0,86.2,0,129.3c0,0.8,0.1,1.6,0.1,2.4
            c-0.6,0.8-1.5,0.4-2.2,0.4c-46.8,0-93.6,0-140.4,0c-2.5,0-2.5,0-2.5-2.6c0-43.2,0-86.4,0-129.6c0-2.6,0-2.6,2.5-2.6
            c46.8,0,93.6,0,140.4,0C566,296.5,566.9,296.1,567.5,296.9z"/>
        <path id="XMLID_86_" class="st1" d="M567.5,296.9c-0.8-0.4-1.7-0.2-2.6-0.2c-46.6,0-93.3,0-139.9,0c-0.4,0-0.8,0-1.2,0
            c-0.9-0.1-1.4,0.2-1.3,1.2c0,0.6,0,1.1,0,1.7c0,43,0,85.9,0,128.9c0,2.9,0,2.9,3,2.9c46.3,0,92.6,0,138.9,0c1,0,2.1,0.2,3.1-0.3
            c-0.2,0.4-0.5,0.6-0.9,0.6c-0.6,0-1.3,0-1.9,0c-46.5,0-92.9,0-139.4,0c-3.5,0-3.2,0.2-3.2-3.3c0-42.9,0-85.9,0-128.8
            c0-3.5-0.3-3.3,3.2-3.3c46.5,0,92.9,0,139.4,0C565.6,296.3,566.8,295.7,567.5,296.9z"/>
    </g>
    
        </a>
    
    
    
    
    
    
    
    
            <a xlink:href="javascript:alert(&apos;5&apos;)" >
<title>5</title>
    <g id="XMLID_7_">
        <path id="XMLID_88_" class="st0" d="M411.1,665.1c0.4-0.8,0.2-1.6,0.2-2.4c0-43,0-86.1,0-129.1c0-0.8,0.2-1.6-0.2-2.4
            c0.4-0.9,1.3-0.5,1.9-0.5c47,0,94.1,0,141.1-0.1c1.9,0,2.2,0.6,2.2,2.3c0,43.4,0,86.9,0,130.3c0,1.7-0.3,2.3-2.2,2.3
            c-47-0.1-94.1,0-141.1-0.1C412.3,665.6,411.5,666,411.1,665.1z"/>
        <path id="XMLID_85_" class="st1" d="M411.1,665.1c0.9,0.5,1.9,0.3,2.8,0.3c46.6,0,93.1,0,139.7,0c0.3,0,0.6,0,1,0
            c1.3,0.2,1.7-0.4,1.6-1.6c0-0.4,0-0.8,0-1.2c0-43,0-85.9,0-128.9c0-3,0-3-3.1-3c-46.2,0-92.5,0-138.7,0c-1.1,0-2.3-0.3-3.2,0.5
            c0.2-0.5,0.6-0.7,1.1-0.7c0.6,0,1.3,0,1.9,0c46.4,0,92.8,0,139.2,0c3.5,0,3.2-0.3,3.2,3.2c0,43,0,85.9,0,128.9
            c0,3.5,0.3,3.2-3.2,3.2c-46.4,0-92.8,0-139.2,0C413.1,665.8,411.8,666.4,411.1,665.1z"/>
    </g>
    
    
    
        </a>
    
    
    
    
    
    
    
        <a xlink:href="javascript:alert(&apos;6&apos;)" >
<title>6</title>
    <g id="XMLID_12_">
        <path id="XMLID_92_" class="st0" d="M402.5,906.1c0-0.8,0.1-1.6,0.1-2.4c0-43.1,0-86.2,0-129.3c0-0.8-0.1-1.6-0.1-2.4
            c0.6-0.8,1.5-0.4,2.2-0.4c46.8,0,93.6,0,140.4,0c2.5,0,2.5,0,2.5,2.6c0,43.2,0,86.4,0,129.6c0,2.6,0,2.6-2.5,2.6
            c-46.8,0-93.6,0-140.4,0C404,906.5,403.1,906.9,402.5,906.1z"/>
        <path id="XMLID_84_" class="st1" d="M402.5,906.1c0.8,0.4,1.7,0.2,2.6,0.2c46.6,0,93.2,0,139.8,0c0.3,0,0.6,0,1,0
            c1.3,0.2,1.7-0.5,1.6-1.6c0-0.4,0-0.8,0-1.2c0-42.9,0-85.9,0-128.8c0-0.2,0-0.5,0-0.7c0-2.4,0.3-2.3-2.3-2.3
            c-46.7,0-93.4,0-140.1,0c-0.9,0-1.8-0.2-2.6,0.4c0.2-0.4,0.5-0.6,0.9-0.6c0.6,0,1.3,0,1.9,0c46.5,0,92.9,0,139.4,0
            c3.5,0,3.2-0.2,3.2,3.3c0,42.9,0,85.9,0,128.8c0,3.5,0.3,3.3-3.2,3.3c-46.5,0-92.9,0-139.4,0C404.3,906.8,403.2,907.3,402.5,906.1
            z"/>
    </g>
    
    </a>
    
    
        <a xlink:href="javascript:alert(&apos;7&apos;)" >
<title>7</title>
    <g id="XMLID_9_">
        <path id="XMLID_90_" class="st0" d="M121.2,460.1c0.4-0.8,0.2-1.6,0.2-2.4c0-43,0-86.1,0-129.1c0-0.8,0.2-1.6-0.2-2.4
            c0.4-0.9,1.3-0.5,1.9-0.5c47,0,94.1,0,141.1-0.1c1.9,0,2.2,0.6,2.2,2.3c0,43.4,0,86.9,0,130.3c0,1.7-0.3,2.3-2.2,2.3
            c-47-0.1-94.1,0-141.1-0.1C122.4,460.6,121.6,461,121.2,460.1z"/>
        <path id="XMLID_83_" class="st1" d="M121.2,460.1c0.7,0.5,1.5,0.4,2.3,0.4c46.9,0,93.7,0,140.6,0c2.2,0,2.1,0.2,2.1-2.1
            c0-43.5,0-87,0-130.5c0-2.2,0.1-2-2.1-2c-46.9,0-93.7,0-140.6,0c-0.8,0-1.6-0.1-2.3,0.4c0.2-0.5,0.6-0.7,1.1-0.8
            c0.6,0,1.3,0,1.9,0c46.4,0,92.8,0,139.2,0c3.5,0,3.2-0.3,3.2,3.2c0,43,0,85.9,0,128.9c0,3.5,0.3,3.2-3.2,3.2
            c-46.4,0-92.8,0-139.2,0C123.2,460.8,121.9,461.4,121.2,460.1z"/>
    </g>
</a>
            <a xlink:href="javascript:alert(&apos;8&apos;)" >
<title>8</title>
    <g id="XMLID_13_">
        <path id="XMLID_95_" class="st0" d="M861.6,872.2c-48.2,0-96.5,0-144.7,0c-0.7-0.7-0.4-1.5-0.4-2.3c0-43.4,0-86.8,0-130.3
            c0-0.8-0.3-1.6,0.4-2.3c48.2,0,96.5,0,144.7,0c0.7,0.7,0.4,1.5,0.4,2.3c0,43.4,0,86.8,0,130.3C862,870.7,862.3,871.5,861.6,872.2z
            "/>
        <path id="XMLID_81_" class="st1" d="M717,737.4c0,0.9-0.1,1.8-0.1,2.6c0,43.2,0,86.4,0,129.5c0,0.9,0.1,1.8,0.1,2.6
            c-0.4-0.2-0.6-0.5-0.6-0.9c0-0.6,0-1.3,0-1.9c0-43,0-86,0-129.1C716.4,739.3,715.8,738.2,717,737.4z"/>
        <path id="XMLID_80_" class="st1" d="M861.6,872.2c0-0.9,0.1-1.8,0.1-2.6c0-43.2,0-86.4,0-129.5c0-0.9-0.1-1.8-0.1-2.6
            c0.4,0.2,0.6,0.5,0.6,0.9c0,0.6,0,1.3,0,1.9c0,43,0,86,0,129.1C862.2,870.3,862.8,871.4,861.6,872.2z"/>
    </g>
    
    
    </a>
    
    
    
    
    
        <a xlink:href="javascript:alert(&apos;9&apos;)" >
<title>9</title>
    
    <g id="XMLID_3_">
        <path id="XMLID_102_" class="st0" d="M567.5,79.8c0,0.8-0.1,1.6-0.1,2.4c0,43.2,0,86.3,0,129.5c0,0.8,0.1,1.6,0.1,2.4
            c-0.1,0.3-0.3,0.5-0.6,0.6c-0.7,0-1.4-0.1-2.1-0.1c-46.6,0-93.2,0-139.8,0c-0.7,0-1.4,0.1-2.2,0.1c-0.9-0.7-0.4-1.6-0.4-2.4
            c0-43.3,0-86.7,0-130c0-0.8-0.2-1.6,0.2-2.4C470.9,79.8,519.2,79.8,567.5,79.8z"/>
        <path id="XMLID_97_" class="st2" d="M422.6,79.8c0,0.7,0,1.4,0,2.2c0,43.3,0,86.6,0,129.8c0,1-0.2,1.9,0.2,2.8
            c-0.5-0.2-0.7-0.6-0.7-1.1c0-0.7,0-1.4,0-2.2c0-43.8,0-87.7,0-131.5C422.3,79.8,422.4,79.8,422.6,79.8z"/>
        <path id="XMLID_78_" class="st2" d="M566.9,214.6c0.2-0.2,0.4-0.4,0.6-0.6C567.4,214.3,567.2,214.5,566.9,214.6z"/>
    </g></a>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
<a xlink:href="javascript:alert(&apos;10&apos;)" >
<title>10</title>
<g id="XMLID_4_">
        <path id="XMLID_101_" class="st0" d="M820.8,214.6c-0.7,0-1.4-0.1-2.1-0.1c-46.6,0-93.2,0-139.8,0c-0.7,0-1.4,0.1-2.2,0.1
            c-0.9-0.7-0.4-1.6-0.4-2.4c0-43.3,0-86.7,0-130c0-0.8-0.2-1.6,0.2-2.4c48.3,0,96.6,0,145,0c0,0.8-0.1,1.6-0.1,2.4
            c0,43.2,0,86.3,0,129.5c0,0.8,0.1,1.6,0.1,2.4C821.3,214.3,821.1,214.5,820.8,214.6z"/>
        <path id="XMLID_96_" class="st2" d="M676.5,79.8c0,0.9,0,1.8,0,2.6c0,43,0,86.1,0,129.1c0,1-0.2,2.1,0.2,3.1
            c-0.5-0.2-0.7-0.6-0.7-1.1c0-0.7,0-1.4,0-2.2c0-43.8,0-87.7,0-131.5C676.2,79.8,676.3,79.8,676.5,79.8z"/>
        <path id="XMLID_77_" class="st2" d="M820.8,214.6c0.2-0.2,0.4-0.4,0.6-0.6C821.3,214.3,821.1,214.5,820.8,214.6z"/>
    </g></a>
        
        
        
        
        
        
<a xlink:href="javascript:alert(&apos;11&apos;)" >
<title>11</title>
<path id="XMLID_75_" class="st2" d="M736.6,504.1c-0.2,0.2-0.4,0.5-0.6,0.7C736.1,504.5,736.3,504.2,736.6,504.1z"/>
    <g id="XMLID_10_">
        <path id="XMLID_103_" class="st0" d="M98.6,522.3c0.7,0,1.4,0.1,2.2,0.1c46.9,0,93.7,0,140.6,0c0.7,0,1.4,0,2.2-0.1
            c0.3,0.2,0.5,0.4,0.5,0.7c-0.4,0.8-0.2,1.6-0.2,2.4c0,42.9,0,85.8,0,128.7c0,0.8-0.2,1.6,0.2,2.4c0,0.3-0.2,0.5-0.5,0.7
            c-0.6,0-1.1,0-1.7,0c-47.2,0-94.4,0-141.6,0c-0.6,0-1.1,0-1.7,0C98.6,612.2,98.6,567.3,98.6,522.3z"/>
        <path id="XMLID_76_" class="st2" d="M244,523.1c-0.2-0.2-0.3-0.5-0.5-0.7C243.8,522.5,243.9,522.7,244,523.1z"/>
        <path id="XMLID_74_" class="st1" d="M243.5,657.2c0.2-0.2,0.3-0.5,0.5-0.7C243.9,656.8,243.8,657,243.5,657.2z"/>
    </g>
    </a>
    
    
    
    

<a xlink:href="javascript:alert(&apos;12&apos;)" >
<title>12</title>
    <g id="XMLID_5_">
        <path id="XMLID_93_" class="st0" d="M831.5,259.3c0,1-0.1,1.9-0.1,2.9c0,42.9,0,85.8,0,128.6c0,3.3,0.5,2.8-2.7,2.8
            c-46.6,0-93.1,0-139.7,0c-0.8,0-1.6,0-2.4,0c-0.6-0.8-0.3-1.7-0.3-2.6c0-43.3,0-86.6,0-129.9c0-0.8-0.5-1.8,0.4-2.4
            c0.8,0,1.6,0.1,2.4,0.1c46.4,0,92.7,0,139.1,0c0.9,0,1.8-0.1,2.6-0.1C831.2,258.9,831.4,259.1,831.5,259.3z"/>
        <path id="XMLID_79_" class="st1" d="M686.8,258.8c-0.3,0.8-0.2,1.6-0.2,2.4c0,43.6,0,87.2,0,130.8c0,0.6,0,1.1,0.1,1.7
            c-0.4-0.2-0.5-0.6-0.5-1c0-0.6,0-1.1,0-1.7c0-43.1,0-86.2,0-129.3C686.1,260.7,685.5,259.5,686.8,258.8z"/>
        <path id="XMLID_73_" class="st2" d="M831.5,259.3c-0.2-0.2-0.4-0.3-0.6-0.5C831.2,258.9,831.4,259,831.5,259.3z"/>
    </g>
    </a>
    
    
    
    
    
    
  <foreignObject x="500" y="500" width="500" height="900">
      <div id="test" xmlns="http://www.w3.org/1999/xhtml">
     <form action="/action_page.php">


<input type="checkbox" name="1" value="damaged" >
<input type="checkbox" name="2" value="damaged"> 
<input type="checkbox" name="3" value="damaged"> 
<input type="checkbox" name="4" value="damaged"> 
<input type="checkbox" name="5" value="damaged"> 
<input type="checkbox" name="6" value="damaged"> 


<input type="checkbox" name="7" value="damaged"> 
<input type="checkbox" name="8" value="damaged"> 
<input type="checkbox" name="9" value="damaged">
<input type="checkbox" name="10" value="damaged">



<input type="checkbox" name="11" value="damaged">
<input type="checkbox" name="12" value="damaged">




  <input type="submit" value="Submit">
</form>

          </div>
  </foreignObject>
  
  
  
  

    
    
    
    
    
    
    
    
    
    
</g>
</svg>