基于交互式地图选择更新复选框
Updating checkbox based on interactive map selection
我被要求创建一个交互式地图，以便用户可以通过视觉方式在一个县上进行选择，但是需要将该值传递给普通表单才能实际提交。
我尝试将每个 svg 路径分成单独的复选框，但它破坏了对齐方式。
相反，我试图让用户点击多个 SVG 路径，然后值将被传递到一个隐藏的复选框，但我不知道如何将被点击的 SVG 的值传递到该复选框.任何帮助表示赞赏。
示例 SVG 地图：
$(".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 class="parish" 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 class="parish" 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 class="parish" 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 class="parish-selection">
<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>
$(".parish").click(function(){
var parish = $(this).attr("id");
console.log(parish, "selected");
$("#c" + parish).attr('checked', true);
});
您可以使用此方法，但您应该在复选框 ID 前添加字母“c”。无论如何，ID 应该是唯一的。示例：
<label><input type="checkbox" id="cst-ouen" name="address_keyword[]">St Ouen</label>
这样就可以了。
考虑以下因素。
$(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 class="parish-selection">
<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>
将 <a> 元素放在 <svg> 元素中不是好的做法。我删除了那些并将选择器调整为 SVG 的一部分。具有相同 ID 的多个元素也是错误的语法，因此我调整了复选框的 HTML。您需要确保所有元素都具有唯一 ID。
我还注意到您在 SVG 中有以下 ID：
- st-ouen
- st-brelade
- st-peter
在您的支票中，您有：
- st-mary
- st-ouen
- st-brelade
不清楚这是否是设计使然。
在单击回调中，我们获取被单击元素的 ID，然后将其用于 select 复选框。然后我根据复选框的先前状态将检查的 属性 设置为 Not true 或 false。这会在用户单击元素时打开或关闭抽动。
我被要求创建一个交互式地图，以便用户可以通过视觉方式在一个县上进行选择，但是需要将该值传递给普通表单才能实际提交。
我尝试将每个 svg 路径分成单独的复选框，但它破坏了对齐方式。
相反，我试图让用户点击多个 SVG 路径，然后值将被传递到一个隐藏的复选框，但我不知道如何将被点击的 SVG 的值传递到该复选框.任何帮助表示赞赏。
示例 SVG 地图：
$(".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 class="parish" 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 class="parish" 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 class="parish" 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 class="parish-selection">
<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>
$(".parish").click(function(){
var parish = $(this).attr("id");
console.log(parish, "selected");
$("#c" + parish).attr('checked', true);
});
您可以使用此方法，但您应该在复选框 ID 前添加字母“c”。无论如何，ID 应该是唯一的。示例：
<label><input type="checkbox" id="cst-ouen" name="address_keyword[]">St Ouen</label>
这样就可以了。
考虑以下因素。
$(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 class="parish-selection">
<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>
将 <a> 元素放在 <svg> 元素中不是好的做法。我删除了那些并将选择器调整为 SVG 的一部分。具有相同 ID 的多个元素也是错误的语法，因此我调整了复选框的 HTML。您需要确保所有元素都具有唯一 ID。
我还注意到您在 SVG 中有以下 ID：
- st-ouen
- st-brelade
- st-peter
在您的支票中，您有：
- st-mary
- st-ouen
- st-brelade
不清楚这是否是设计使然。
在单击回调中，我们获取被单击元素的 ID，然后将其用于 select 复选框。然后我根据复选框的先前状态将检查的 属性 设置为 Not true 或 false。这会在用户单击元素时打开或关闭抽动。