Updating checkbox based on interactive map selection-CodePudding

I've been asked to create an interactive map so that a user can make a selection on a county through a visual means, but the value needs to then be passed to a normal form in order to actually submit it.

I tried separating each of the svg paths into individual checkboxes but it breaks the alignments.

Instead, I am trying to allow a user to click on multiple SVG paths and then the value will be passed to a hidden checkbox but I can't work out how to pass the value of a clicked SVG to that checkbox. Any help appreciated.

Example SVG map:

$(".parish").click(function() {
  var parish = $(this).attr("id");

  console.log(parish, "selected");

  $('input[type="checkbox"]').change(function() {
    ($(this).prop('checked', true));
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map-container">
  <svg width="100%" height="100%" id="parish" viewBox="0 0 1823 1142" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;">
                    
                    <a  id="st-ouen">
                        <g id="st-ouen" transform="matrix(2.66667,0,0,2.66667,543.288,321.677)">
                            <path d="M0,-25.579C-8.867,-26.564 -41.993,-32.022 -53.246,-56.804C-57.264,-59.446 -65.968,-65.437 -67.745,-68.891C-70.073,-73.414 -68.632,-76.111 -72.655,-77.121C-76.678,-78.132 -77.622,-77.188 -78.565,-80.963C-79.509,-84.737 -80.875,-87.957 -83.494,-86.819C-86.114,-85.68 -88.801,-86.07 -90.288,-86.819C-91.775,-87.568 -99.324,-92.285 -102.155,-92.285C-104.985,-92.285 -106.873,-97.003 -109.703,-97.947C-112.534,-98.89 -111.59,-101.721 -115.365,-102.665C-119.139,-103.608 -121.97,-102.665 -122.913,-105.495C-123.857,-108.326 -120.083,-116.818 -123.857,-117.762C-127.631,-118.705 -127.631,-114.931 -130.462,-113.987C-133.292,-113.044 -134.236,-113.044 -135.18,-110.213C-136.123,-107.382 -136.123,-97.947 -136.123,-97.947C-136.123,-97.947 -137.067,-94.173 -139.897,-94.173C-142.728,-94.173 -149.333,-97.003 -149.333,-97.003L-159.712,-99.834C-159.712,-99.834 -162.543,-103.608 -166.317,-104.552C-170.092,-105.495 -176.697,-105.495 -177.64,-103.608C-178.584,-101.721 -182.358,-104.552 -184.245,-100.777C-186.132,-97.003 -186.132,-91.342 -188.963,-90.398C-191.794,-89.455 -192.737,-91.342 -193.681,-88.511C-194.624,-85.68 -195.568,-84.737 -198.399,-82.85C-201.229,-80.963 -203.117,-79.075 -203.117,-74.358C-203.117,-69.64 -205.004,-63.978 -202.173,-60.204C-199.342,-56.43 -199.918,-53.989 -198.215,-50.963C-196.512,-47.938 -194.624,-43.22 -193.681,-39.445C-192.737,-35.671 -194.624,-34.728 -196.512,-31.897C-198.399,-29.066 -194.624,-26.235 -194.624,-23.405C-194.624,-20.574 -192.737,-15.856 -188.963,-17.743C-185.189,-19.631 -179.527,-25.292 -176.697,-23.405C-173.866,-21.518 -166.317,-13.969 -164.43,-8.308C-162.543,-2.646 -163.487,2.072 -158.769,7.733C-154.051,13.394 -142.728,27.548 -139.897,36.984C-137.067,46.419 -128.575,56.799 -128.575,63.404C-128.575,67.249 -128.57,72.375 -128.012,77.476C-112.191,75.408 -93.701,72.461 -91.15,69.722C-91.15,69.722 -87.529,93.126 -83.755,91.239C-79.981,89.352 -67.572,78.029 -59.623,77.085C-51.674,76.142 -50.485,72.737 -45.418,69.722C-40.351,66.706 -26.197,54.44 -25.254,46.891C-24.31,39.343 -30.915,28.963 -29.028,23.302C-27.141,17.64 -17.928,10.369 -17.928,10.369C-17.928,10.369 4.621,-0.493 4.309,-8.41C3.997,-16.328 10.156,-24.451 0,-25.579" style="fill:rgb(214,216,221);fill-rule:nonzero;"/>
                        </g>
                    </a>
                    <a  id="st-brelade">
                        <g id="st-brelade" transform="matrix(2.66667,0,0,2.66667,542.624,700.854)">
                            <path d="M0,138.233C0.944,136.346 3.774,125.023 11.323,125.967C18.871,126.91 16.041,136.346 20.759,136.346C25.476,136.346 29.703,137.903 29.005,141.371C28.307,144.838 23.589,141.064 23.589,144.838C23.589,148.612 33.968,147.669 34.912,150.499C35.856,153.33 36.799,155.217 38.686,153.33C40.573,151.443 47.178,136.346 50.009,138.233C52.84,140.12 52.84,135.402 51.896,134.459C50.953,133.515 52.461,128.966 52.461,128.966C52.461,128.966 54.727,123.136 51.896,118.418C49.066,113.7 54.727,108.039 49.066,107.095C43.404,106.152 41.989,102.849 41.045,100.962C40.102,99.075 36.327,98.131 37.271,94.357C38.215,90.583 45.443,85.981 41.357,82.149C37.271,78.316 39.158,72.655 40.102,66.993C41.045,61.332 36.327,64.163 35.384,60.389C34.44,56.614 38.215,56.614 38.215,53.784C38.215,50.953 37.271,45.291 41.045,41.517C44.27,38.293 50.266,30.943 60.767,25.926C54.155,22.079 43.404,15.733 37.048,11.51C27.39,5.092 21.23,10.379 8.574,6.278C-4.082,2.176 -19.343,-1.887 -31.61,-8.492C-43.876,-15.097 -44.82,-11.323 -59.373,-8.503C-73.927,-5.683 -72.183,-16.984 -82.562,-16.984C-87.73,-16.984 -105.763,-10.201 -122.569,-3.388C-123.911,8.746 -123.441,24.547 -127.218,29.686C-132.1,36.328 -134.186,48.784 -140.219,49.632C-146.253,50.481 -150.027,54.255 -150.027,54.255C-150.027,54.255 -154.745,49.538 -156.632,51.425C-158.52,53.312 -155.689,60.86 -152.858,63.691C-150.027,66.522 -152.858,67.465 -157.576,67.465C-162.294,67.465 -163.237,67.465 -165.125,71.24C-167.012,75.014 -167.012,75.014 -172.673,76.901C-178.335,78.788 -176.447,79.732 -179.278,81.619C-182.109,83.506 -183.052,80.675 -184.939,83.506C-186.827,86.337 -188.714,87.28 -188.714,87.28C-188.714,87.28 -193.432,83.506 -195.319,86.337C-197.206,89.167 -197.206,90.111 -194.375,91.055L-188.714,92.942L-182.109,87.28C-182.109,87.28 -174.56,80.675 -169.842,85.393C-165.125,90.111 -161.35,90.111 -161.35,93.885C-161.35,97.66 -161.35,104.264 -158.52,101.434C-155.689,98.603 -153.802,92.942 -151.915,93.885C-150.027,94.829 -151.915,100.49 -149.084,101.434C-146.253,102.377 -144.366,100.49 -143.422,103.321C-142.479,106.152 -141.535,105.208 -140.592,108.039C-139.648,110.869 -139.648,112.757 -136.817,112.757C-133.987,112.757 -128.147,110.869 -124.934,112.757C-121.72,114.644 -120.777,119.362 -117.003,117.474C-113.228,115.587 -108.51,110.869 -104.736,111.813C-100.962,112.757 -94.357,107.095 -94.357,105.208C-94.357,103.321 -89.639,99.547 -85.865,101.434C-82.09,103.321 -83.978,106.152 -81.147,106.152C-78.316,106.152 -80.203,109.926 -77.373,108.982C-74.542,108.039 -73.598,99.547 -73.598,99.547C-73.598,99.547 -67.937,92.942 -66.05,95.772C-64.163,98.603 -60.246,99.799 -59.373,97.314C-58.501,94.829 -61.332,85.393 -57.558,85.393C-53.783,85.393 -50.953,85.611 -50.953,81.256C-50.953,76.901 -50.953,65.578 -46.235,67.465C-41.517,69.353 -23.589,75.014 -25.476,78.788C-27.363,82.562 -24.533,83.506 -21.702,83.506C-18.871,83.506 -11.323,88.224 -10.379,93.885C-9.436,99.547 -4.718,101.434 -11.323,103.321C-17.928,105.208 -20.759,104.264 -18.871,108.982C-16.984,113.7 -16.041,118.418 -16.984,120.305C-17.928,122.192 -11.323,122.192 -14.154,125.967C-16.984,129.741 -24.533,129.741 -23.589,134.459C-22.646,139.177 -16.984,139.177 -16.041,141.064C-15.097,142.951 -8.492,135.402 -5.661,138.233C-2.831,141.064 -0.944,140.12 0,138.233" style="fill:rgb(225,226,230);fill-rule:nonzero;"/>
                        </g>
                    </a>
                    <a  id="st-peter">
                        <g id="st-peter" transform="matrix(2.66667,0,0,2.66667,722.531,454.84)">
                            <path d="M0,64.892C-0.944,58.287 -10.379,61.118 -12.489,52.46C-14.599,43.803 -6.605,40.359 -4.164,35.067C-1.723,29.774 -6.605,23.375 -7.322,17.898C-8.04,12.422 -1.887,4.504 3.795,1.895C5.891,0.932 5.933,-4.457 5.155,-10.869C3.168,-10.679 1.061,-10.869 -0.944,-11.537C-9.436,-14.368 -12.946,-14.771 -16.381,-10.795C-19.815,-6.819 -30.194,7.334 -36.799,-3.045C-43.404,-13.424 -46.966,-10.04 -51.79,-19.752C-55.594,-27.411 -59.361,-44.404 -65.167,-53.284C-70.82,-46.472 -85.144,-39.567 -85.144,-39.567C-85.144,-39.567 -94.357,-32.296 -96.244,-26.634C-98.131,-20.973 -91.526,-10.594 -92.47,-3.045C-93.413,4.504 -107.567,16.77 -112.634,19.785C-117.701,22.801 -118.89,26.206 -126.839,27.149C-134.788,28.093 -147.197,39.416 -150.971,41.303C-154.745,43.19 -158.366,19.785 -158.366,19.785C-160.917,22.525 -179.407,25.472 -195.228,27.54C-194.827,31.2 -194.142,34.847 -192.96,38C-190.129,45.549 -184.468,68.194 -188.242,79.517C-189.097,82.081 -189.644,85.317 -190.037,88.868C-173.23,82.055 -155.195,75.271 -150.027,75.271C-139.648,75.271 -141.393,86.572 -126.839,83.752C-112.285,80.933 -111.341,77.158 -99.075,83.763C-86.808,90.368 -71.547,94.431 -58.891,98.533C-46.235,102.635 -40.075,97.347 -30.417,103.765C-24.065,107.986 -13.32,114.329 -6.708,118.176C-4.921,117.32 -3.004,116.532 -0.944,115.845C2.073,114.839 5.152,113.947 8.224,113.17C8.027,102.153 7.818,84.506 8.361,78.379C9.174,69.22 0.944,71.497 0,64.892" style="fill:rgb(235,236,238);fill-rule:nonzero;"/>
                        </g>
                    </a>
</div>

    <div >
                <label><input type="checkbox" id="st-mary" name="address_keyword[]">St Mary</label>
                <label><input type="checkbox" id="st-ouen" name="address_keyword[]">St Ouen</label>
                <label><input type="checkbox" id="st-brelade" name="address_keyword[]">St Brelade</label>
            </div>

CodePudding user response：

$(".parish").click(function(){
    var parish = $(this).attr("id");
        console.log(parish, "selected");
        $("#c"   parish).attr('checked', true);
});

you can use this method but you should add the letter "c" in front of your checkbox ids. ID's should be unique anyway. example:

<label><input type="checkbox" id="cst-ouen" name="address_keyword[]">St Ouen</label>

this way it will work.

CodePudding user response：

Consider the following.

$(function() {
  $("svg > g").click(function() {
    var parish = $("#"   $(this).attr("id")   "-chk");
    parish.prop("checked", !parish.prop("checked"));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map-container">
  <svg width="100%" height="100%" id="parish" viewBox="0 0 1823 1142" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;">
    <g id="st-ouen" transform="matrix(2.66667,0,0,2.66667,543.288,321.677)">
      <path d="M0,-25.579C-8.867,-26.564 -41.993,-32.022 -53.246,-56.804C-57.264,-59.446 -65.968,-65.437 -67.745,-68.891C-70.073,-73.414 -68.632,-76.111 -72.655,-77.121C-76.678,-78.132 -77.622,-77.188 -78.565,-80.963C-79.509,-84.737 -80.875,-87.957 -83.494,-86.819C-86.114,-85.68 -88.801,-86.07 -90.288,-86.819C-91.775,-87.568 -99.324,-92.285 -102.155,-92.285C-104.985,-92.285 -106.873,-97.003 -109.703,-97.947C-112.534,-98.89 -111.59,-101.721 -115.365,-102.665C-119.139,-103.608 -121.97,-102.665 -122.913,-105.495C-123.857,-108.326 -120.083,-116.818 -123.857,-117.762C-127.631,-118.705 -127.631,-114.931 -130.462,-113.987C-133.292,-113.044 -134.236,-113.044 -135.18,-110.213C-136.123,-107.382 -136.123,-97.947 -136.123,-97.947C-136.123,-97.947 -137.067,-94.173 -139.897,-94.173C-142.728,-94.173 -149.333,-97.003 -149.333,-97.003L-159.712,-99.834C-159.712,-99.834 -162.543,-103.608 -166.317,-104.552C-170.092,-105.495 -176.697,-105.495 -177.64,-103.608C-178.584,-101.721 -182.358,-104.552 -184.245,-100.777C-186.132,-97.003 -186.132,-91.342 -188.963,-90.398C-191.794,-89.455 -192.737,-91.342 -193.681,-88.511C-194.624,-85.68 -195.568,-84.737 -198.399,-82.85C-201.229,-80.963 -203.117,-79.075 -203.117,-74.358C-203.117,-69.64 -205.004,-63.978 -202.173,-60.204C-199.342,-56.43 -199.918,-53.989 -198.215,-50.963C-196.512,-47.938 -194.624,-43.22 -193.681,-39.445C-192.737,-35.671 -194.624,-34.728 -196.512,-31.897C-198.399,-29.066 -194.624,-26.235 -194.624,-23.405C-194.624,-20.574 -192.737,-15.856 -188.963,-17.743C-185.189,-19.631 -179.527,-25.292 -176.697,-23.405C-173.866,-21.518 -166.317,-13.969 -164.43,-8.308C-162.543,-2.646 -163.487,2.072 -158.769,7.733C-154.051,13.394 -142.728,27.548 -139.897,36.984C-137.067,46.419 -128.575,56.799 -128.575,63.404C-128.575,67.249 -128.57,72.375 -128.012,77.476C-112.191,75.408 -93.701,72.461 -91.15,69.722C-91.15,69.722 -87.529,93.126 -83.755,91.239C-79.981,89.352 -67.572,78.029 -59.623,77.085C-51.674,76.142 -50.485,72.737 -45.418,69.722C-40.351,66.706 -26.197,54.44 -25.254,46.891C-24.31,39.343 -30.915,28.963 -29.028,23.302C-27.141,17.64 -17.928,10.369 -17.928,10.369C-17.928,10.369 4.621,-0.493 4.309,-8.41C3.997,-16.328 10.156,-24.451 0,-25.579" style="fill:rgb(214,216,221);fill-rule:nonzero;"/>
    </g>
    <g id="st-brelade" transform="matrix(2.66667,0,0,2.66667,542.624,700.854)">
      <path d="M0,138.233C0.944,136.346 3.774,125.023 11.323,125.967C18.871,126.91 16.041,136.346 20.759,136.346C25.476,136.346 29.703,137.903 29.005,141.371C28.307,144.838 23.589,141.064 23.589,144.838C23.589,148.612 33.968,147.669 34.912,150.499C35.856,153.33 36.799,155.217 38.686,153.33C40.573,151.443 47.178,136.346 50.009,138.233C52.84,140.12 52.84,135.402 51.896,134.459C50.953,133.515 52.461,128.966 52.461,128.966C52.461,128.966 54.727,123.136 51.896,118.418C49.066,113.7 54.727,108.039 49.066,107.095C43.404,106.152 41.989,102.849 41.045,100.962C40.102,99.075 36.327,98.131 37.271,94.357C38.215,90.583 45.443,85.981 41.357,82.149C37.271,78.316 39.158,72.655 40.102,66.993C41.045,61.332 36.327,64.163 35.384,60.389C34.44,56.614 38.215,56.614 38.215,53.784C38.215,50.953 37.271,45.291 41.045,41.517C44.27,38.293 50.266,30.943 60.767,25.926C54.155,22.079 43.404,15.733 37.048,11.51C27.39,5.092 21.23,10.379 8.574,6.278C-4.082,2.176 -19.343,-1.887 -31.61,-8.492C-43.876,-15.097 -44.82,-11.323 -59.373,-8.503C-73.927,-5.683 -72.183,-16.984 -82.562,-16.984C-87.73,-16.984 -105.763,-10.201 -122.569,-3.388C-123.911,8.746 -123.441,24.547 -127.218,29.686C-132.1,36.328 -134.186,48.784 -140.219,49.632C-146.253,50.481 -150.027,54.255 -150.027,54.255C-150.027,54.255 -154.745,49.538 -156.632,51.425C-158.52,53.312 -155.689,60.86 -152.858,63.691C-150.027,66.522 -152.858,67.465 -157.576,67.465C-162.294,67.465 -163.237,67.465 -165.125,71.24C-167.012,75.014 -167.012,75.014 -172.673,76.901C-178.335,78.788 -176.447,79.732 -179.278,81.619C-182.109,83.506 -183.052,80.675 -184.939,83.506C-186.827,86.337 -188.714,87.28 -188.714,87.28C-188.714,87.28 -193.432,83.506 -195.319,86.337C-197.206,89.167 -197.206,90.111 -194.375,91.055L-188.714,92.942L-182.109,87.28C-182.109,87.28 -174.56,80.675 -169.842,85.393C-165.125,90.111 -161.35,90.111 -161.35,93.885C-161.35,97.66 -161.35,104.264 -158.52,101.434C-155.689,98.603 -153.802,92.942 -151.915,93.885C-150.027,94.829 -151.915,100.49 -149.084,101.434C-146.253,102.377 -144.366,100.49 -143.422,103.321C-142.479,106.152 -141.535,105.208 -140.592,108.039C-139.648,110.869 -139.648,112.757 -136.817,112.757C-133.987,112.757 -128.147,110.869 -124.934,112.757C-121.72,114.644 -120.777,119.362 -117.003,117.474C-113.228,115.587 -108.51,110.869 -104.736,111.813C-100.962,112.757 -94.357,107.095 -94.357,105.208C-94.357,103.321 -89.639,99.547 -85.865,101.434C-82.09,103.321 -83.978,106.152 -81.147,106.152C-78.316,106.152 -80.203,109.926 -77.373,108.982C-74.542,108.039 -73.598,99.547 -73.598,99.547C-73.598,99.547 -67.937,92.942 -66.05,95.772C-64.163,98.603 -60.246,99.799 -59.373,97.314C-58.501,94.829 -61.332,85.393 -57.558,85.393C-53.783,85.393 -50.953,85.611 -50.953,81.256C-50.953,76.901 -50.953,65.578 -46.235,67.465C-41.517,69.353 -23.589,75.014 -25.476,78.788C-27.363,82.562 -24.533,83.506 -21.702,83.506C-18.871,83.506 -11.323,88.224 -10.379,93.885C-9.436,99.547 -4.718,101.434 -11.323,103.321C-17.928,105.208 -20.759,104.264 -18.871,108.982C-16.984,113.7 -16.041,118.418 -16.984,120.305C-17.928,122.192 -11.323,122.192 -14.154,125.967C-16.984,129.741 -24.533,129.741 -23.589,134.459C-22.646,139.177 -16.984,139.177 -16.041,141.064C-15.097,142.951 -8.492,135.402 -5.661,138.233C-2.831,141.064 -0.944,140.12 0,138.233" style="fill:rgb(225,226,230);fill-rule:nonzero;"/>
    </g>
    <g id="st-peter" transform="matrix(2.66667,0,0,2.66667,722.531,454.84)">
      <path d="M0,64.892C-0.944,58.287 -10.379,61.118 -12.489,52.46C-14.599,43.803 -6.605,40.359 -4.164,35.067C-1.723,29.774 -6.605,23.375 -7.322,17.898C-8.04,12.422 -1.887,4.504 3.795,1.895C5.891,0.932 5.933,-4.457 5.155,-10.869C3.168,-10.679 1.061,-10.869 -0.944,-11.537C-9.436,-14.368 -12.946,-14.771 -16.381,-10.795C-19.815,-6.819 -30.194,7.334 -36.799,-3.045C-43.404,-13.424 -46.966,-10.04 -51.79,-19.752C-55.594,-27.411 -59.361,-44.404 -65.167,-53.284C-70.82,-46.472 -85.144,-39.567 -85.144,-39.567C-85.144,-39.567 -94.357,-32.296 -96.244,-26.634C-98.131,-20.973 -91.526,-10.594 -92.47,-3.045C-93.413,4.504 -107.567,16.77 -112.634,19.785C-117.701,22.801 -118.89,26.206 -126.839,27.149C-134.788,28.093 -147.197,39.416 -150.971,41.303C-154.745,43.19 -158.366,19.785 -158.366,19.785C-160.917,22.525 -179.407,25.472 -195.228,27.54C-194.827,31.2 -194.142,34.847 -192.96,38C-190.129,45.549 -184.468,68.194 -188.242,79.517C-189.097,82.081 -189.644,85.317 -190.037,88.868C-173.23,82.055 -155.195,75.271 -150.027,75.271C-139.648,75.271 -141.393,86.572 -126.839,83.752C-112.285,80.933 -111.341,77.158 -99.075,83.763C-86.808,90.368 -71.547,94.431 -58.891,98.533C-46.235,102.635 -40.075,97.347 -30.417,103.765C-24.065,107.986 -13.32,114.329 -6.708,118.176C-4.921,117.32 -3.004,116.532 -0.944,115.845C2.073,114.839 5.152,113.947 8.224,113.17C8.027,102.153 7.818,84.506 8.361,78.379C9.174,69.22 0.944,71.497 0,64.892" style="fill:rgb(235,236,238);fill-rule:nonzero;"/>
    </g>
  </svg>
</div>

<div >
  <label><input type="checkbox" id="st-mary-chk" name="address_keyword[]">St Mary</label>
  <label><input type="checkbox" id="st-ouen-chk" name="address_keyword[]">St Ouen</label>
  <label><input type="checkbox" id="st-brelade-chk" name="address_keyword[]">St Brelade</label>
</div>

It is not good practice to place <a> elements within a <svg> element. I removed those and adjusted the Selector to parts of the SVG. Also it is bad syntax to have multiple elements with the same ID, so I adjusted the HTML for the Check boxes. You will want to ensure that all elements have unique IDs.

I also noticed that you have the following IDs in the SVG:

st-ouen
st-brelade
st-peter

In your Checks, you have:

st-mary
st-ouen
st-brelade

It was not clear if this is by design or not.

In the Click Callback, we get the ID of the element that was clicked and then use that to select the Check box. I then set the property of the check to Not true or false based on the previous state of the check box. This toggles the tic on or off as the user clicks the element.