I want to show an image when a checkbox is checked

user2656427

I have a question about checkboxes when paired with radio buttons. I have some maps and whenever I choose a radio button, a certain image appears and I can hover my mouse to choose a polygon I have mapped. The thing is, I want, along with the radio buttons, a checkbox with the label “Show all”. Whenever I check the box I want the image with all the polygons to appear. I hope I’m clear enough. Here is the code.

function showDiv (divId)
{
  var div = document.getElementById (divId);
  var divs = document.getElementsByTagName('div');
  for (var i in divs) 
  {
    divs [i].className = "hidden";
  }
  div.className = "shown";
}

$(document).ready(function() {
  $('.mapF').maphilight({
  });
});
function fnchecked(blnchecked)
{
  if(blnchecked) {
    document.getElementById("divcheck").style.display = "";
  } else {
    document.getElementById("divcheck").style.display = "none";
  }             
}

.hidden
{
  display:none;
}
.shown
{
  display:block;
}
#img {
  z-index:1000;
}
ul { list-style-type: none }

<ul>
  <li><input type="radio" onclick="showDiv ('1')" name="selectme">#sports</input></li>
  <li><input type="radio" onclick="showDiv ('2')" name="selectme">#nature</input>       </li>
  <li><input type="radio" onclick="showDiv ('3')" name="selectme">#culture</input> </li>
  <li><input type="radio" onclick="showDiv ('4')" name="selectme">#cuisine</input> </li>
  <li><input type="radio" onclick="showDiv ('5')" name="selectme">#nightlife</input> </li>
</ul>
<div id="1" class="visible" style="border:0px solid #ddd; width:800px; height:800px; overflow:visible;">
  <input type="checkbox" name="fldcheckbox" id="fldcheckbox"  onclick="fnchecked(this.checked);">Show all</input>
  <div id="divcheck" style="display:none; ">
    <img id="sports"  src="images/greece_sports.jpg" z-index:100/>
    </div>
    <img class="mapF" src = "images/greece_map.png" alt="" width="800" height="800"   border="0" usemap="#greece" />
    <!-- ------------------------ MAP ---------------------- -->
    <map class="mapH" name="greece">
      <area shape=poly coords=450,418,502,418,589,503,589,669,576,657,406,657,406,462,405,459,405,456,407,455,407,451,404,449,404,443,401,443,401,429,402,428,400,426,400,421,398,420,398,418, href="#" alt="" title="Cyclades" data-maphilight='{"stroke":false, "strokeColor":"1a6cb5", "strokeOpacity":1, "strokeWidth":2, "fade":true, "fill":true, "fillColor":"0256a4", "shadow":false, "shadowColor":"000000", "shadowOpacity":0.6, "shadowX":4, "shadowY":"4", "shadowPosition":"outside", "shadowRadius":4}' />
      <area shape=poly coords=406,462,406,530,312,530,310,524,306,524,305,523,305,512,303,510,302,509,302,507,300,505,299,501,295,494,293,494,293,491,294,489,293,488,291,484,291,481,292,479,291,477,290,474,294,471,298,471,299,473,300,475,302,479,305,477,310,477,312,479,315,480,315,483,316,483,316,484,317,484,317,483,320,483,320,486,327,486,328,491,325,492,325,494,322,494,322,497,326,497,326,500,329,500,329,502,328,502,328,503,331,503,331,502,330,502,330,499,331,498,334,498,334,493,336,493,337,491,342,491,344,490,355,490,356,489,358,489,358,487,356,486,353,483,348,482,348,478,346,478,344,479,341,479,338,478,336,475,332,473,328,470,328,465,327,462,329,461,325,457,324,453,329,452,329,449,326,446,316,446,315,444,314,442,314,440,316,439,316,436,326,436,329,434,331,432,335,430,337,430,350,428,354,425,357,425,359,423,365,423,367,425,367,429,365,429,363,431,363,432,368,432,368,434,375,434,375,436,378,437,378,441,382,447,382,449,383,449,383,447,386,447,389,448,394,452,394,458,397,458,397,463,398,464,402,464, href="#" target="_self" alt="Saronic Islands" title="Saronic Islands" data-maphilight='{"stroke":false, "strokeColor":"cc0000", "strokeOpacity":1, "strokeWidth":1, "fade":true, "fill":true, "fillColor":"cedeed", "fillOpacity":0.8, "shadow":false, "shadowColor":"000000", "shadowOpacity":0.6, "shadowX":4, "shadowY":"4", "shadowPosition":"outside", "shadowRadius":4}' />
      <area shape=poly coords=406,462,406,530,312,530,310,524,306,524,305,523,305,512,303,510,302,509,302,507,300,505,299,501,295,494,293,494,293,491,294,489,293,488,291,484,291,481,292,479,291,477,290,474,294,471,298,471,299,473,300,475,302,479,305,477,310,477,312,479,315,480,315,483,316,483,316,484,317,484,317,483,320,483,320,486,327,486,328,491,325,492,325,494,322,494,322,497,326,497,326,500,329,500,329,502,328,502,328,503,331,503,331,502,330,502,330,499,331,498,334,498,334,493,336,493,337,491,342,491,344,490,355,490,356,489,358,489,358,487,356,486,353,483,348,482,348,478,346,478,344,479,341,479,338,478,336,475,332,473,328,470,328,465,327,462,329,461,325,457,324,453,329,452,329,449,326,446,316,446,315,444,314,442,314,440,316,439,316,436,326,436,329,434,331,432,335,430,337,430,350,428,354,425,357,425,359,423,365,423,367,425,367,429,365,429,363,431,363,432,368,432,368,434,375,434,375,436,378,437,378,441,382,447,382,449,383,449,383,447,386,447,389,448,394,452,394,458,397,458,397,463,398,464,402,464, href="#" target="_self" alt="Saronic Islands" title="Saronic Islands" data-maphilight='{"stroke":false, "strokeColor":"cc0000", "strokeOpacity":1, "strokeWidth":1, "fade":true, "fill":true, "fillColor":"cedeed", "fillOpacity":0.8, "shadow":false, "shadowColor":"000000", "shadowOpacity":0.6, "shadowX":4, "shadowY":"4", "shadowPosition":"outside", "shadowRadius":4}' />
      <area shape=poly coords=306,241,434,264,502,333,502,418,398,418,399,416,400,414,403,413,405,412,405,408,396,399,391,398,389,396,385,396,381,394,377,393,372,393,368,388,368,385,366,384,366,382,364,381,364,378,362,375,361,378,358,378,355,376,350,376,348,375,346,376,343,376,343,374,345,373,342,369,340,369,340,366,344,364,344,362,341,360,336,360,333,358,333,360,329,360,326,362,321,356,321,351,319,349,312,349,309,346,308,346,307,348,304,348,302,345,299,345,298,346,296,345,294,343,291,339,285,340,282,340,279,339,278,336,279,333,282,330,284,329,287,330,289,332,292,333,295,334,302,332,304,328,309,329,313,325,317,323,317,320,313,321,313,317,315,316,315,313,313,310,310,310,309,308,309,304,307,305,305,305,301,299,301,290,305,289,310,289,311,286,311,284,321,282,317,283,320,287,327,287,333,294,333,297,336,301,336,305,332,306,332,308,327,310,326,310,326,306,324,306,322,310,323,311,327,311,334,309,334,307,337,307,340,305,343,305,345,302,344,298,342,295,339,291,339,288,337,286,334,282,331,278,326,272,325,268,322,266,318,265,317,263,312,260,308,253,307,248, href="#" target="_self" alt="Sporades" title="Sporades" data-maphilight='{"stroke":false, "strokeColor":"002078", "strokeOpacity":0.2, "strokeWidth":1, "fade":true, "fill":true, "fillColor":"3576b6", "fillOpacity":0.8, "shadow":false, "shadowColor":"000000", "shadowOpacity":0.6, "shadowX":4, "shadowY":"4", "shadowPosition":"outside", "shadowRadius":4}' />
      <area shape=poly coords=692,456,785,586,715,782,589,669,589,502, href="#"     target="_self" alt="Dodekanisa" title="Dodecanese" data-maphilight='{"stroke":false,     "strokeColor":"", "strokeOpacity":0.5, "strokeWidth":2, "fade":true, "fill":true, "fillColor":"3576b6", "fillOpacity":0.8, "shadow":false, "shadowColor":"000000", "shadowOpacity":0.6, "shadowX":4, "shadowY":"4", "shadowPosition":"outside",     "shadowRadius":4}' />
      <area shape=poly     coords=73,573,193,522,193,526,196,528,196,530,199,532,200,535,200,537,203,538,205,539,205,540,202,546,202,549,203,550,203,552,205,552,205,554,210,554,211,553,214,553,214,556,218,562,222,559,223,556,221,550,221,543,222,542,222,535,226,533,230,530,237,530,242,531,243,532,243,536,242,537,242,541,241,543,243,545,245,544,247,544,249,545,251,550,254,553,257,561,259,566,262,566,262,569,260,569,260,571,261,573,261,577,262,577,262,585,260,585,259,586,259,588,260,590,264,590,268,594,269,595,270,594,270,589,268,586,268,576,272,575,270,573,272,569,272,565,277,563,276,561,276,558,281,555,296,555,298,563,299,563,300,567,305,572,305,576,310,579,310,582,312,587,314,585,318,585,321,588,321,593,324,596,326,594,329,595,331,595,330,593,327,593,327,592,325,589,325,583,322,584,318,578,316,575,316,571,317,569,316,567,316,564,318,562,321,562,322,559,321,558,321,555,318,553,318,549,315,543,314,539,313,538,313,536,314,535,314,532,312,530,406,530,406,657,369,657,215,725, href="#" target="_self" alt="Myrtoo" title="Myrtoan Sea" data-maphilight='{"stroke":false, "strokeColor":"002078", "strokeOpacity":0.2, "strokeWidth":1, "fade":true, "fill":true, "fillColor":"cedeed", "fillOpacity":0.8, "shadow":false, "shadowColor":"000000", "shadowOpacity":0.6, "shadowX":4, "shadowY":"4", "shadowPosition":"outside", "shadowRadius":4}' />
      <area shape=poly coords=617,135,692,456,589,502,502,418,502,333,434,264,306,242,305,236,302,234,299,231,295,228,294,224,293,223,294,221,293,219,290,217,286,215,283,210,282,209,282,203,280,199,280,197,282,194,284,191,285,185,287,180,290,176,286,172,286,168,284,165,284,163,285,162,290,162,290,158,293,156,296,159,297,158,297,153,304,152,306,151,306,145,308,144,312,144,315,146,316,147,316,150,315,152,318,155,318,156,317,158,312,161,305,161,305,162,308,164,308,167,311,170,311,172,315,172,316,174,319,175,321,177,321,179,327,181,331,184,338,186,344,189,345,194,346,197,345,198,346,200,344,203,344,205,347,208,350,212,350,216,349,217,350,219,352,218,354,217,359,217,365,221,370,223,376,223,374,220,373,217,369,217,362,214,359,212,355,208,354,205,352,202,350,200,348,199,347,197,346,194,346,190,347,188,351,184,355,184,362,188,366,189,372,189,375,193,378,195,380,199,383,202,383,204,384,205,384,208,386,209,386,211,389,212,392,215,394,216,394,218,396,220,398,218,400,215,402,213,402,212,399,211,400,208,399,206,399,202,395,200,391,197,385,195,382,194,381,191,376,186,375,184,375,180,378,178,379,176,382,177,384,177,388,175,391,175,396,176,398,177,403,182,408,183,414,183,416,187,420,191,420,193,425,197,426,201,433,199,432,196,430,194,424,189,422,184,420,182,419,181,416,181,416,178,409,176,406,175,403,172,402,167,401,167,401,170,402,173,401,174,395,174,392,173,388,168,386,166,385,163,386,160,387,158,393,158,391,156,387,155,385,153,382,151,382,149,379,144,375,143,375,140,378,135,379,132,382,132,386,130,388,129,391,130,398,134,403,137,405,137,406,136,408,136,412,134,421,128,425,126,425,123,427,123,426,121,428,117,430,117,432,113,440,111,445,111,447,112,448,115,452,121,454,120,458,120,458,122,461,122,462,121,463,121,465,122,470,118,474,114,478,113,481,112,482,109,484,108,488,105,492,105,493,106,496,106,496,107,493,110,496,112,503,112,503,113,507,111,512,112,513,115,517,116,524,119,526,120,529,120,530,119,533,119,538,121,560,121,564,124,565,126,567,128,567,134,573,132,574,131,575,130, href="#" target="_self" alt="NorthEast Aegean" title="North East Aegean" data-maphilight='{"stroke":false, "strokeColor":"002078", "strokeOpacity":0.2, "strokeWidth":1, "fade":true, "fill":true, "fillColor":"cedeee", "fillOpacity":0.8, "shadow":false, "shadowColor":"000000", "shadowOpacity":0.6, "shadowX":4, "shadowY":"4", "shadowPosition":"outside", "shadowRadius":4}' />
      <area shape=poly coords=369,657,576,657,715,782,395,782,215,725, href="#" target="_self" alt="Crete" title="Crete" data-maphilight='{"stroke":false, "strokeColor":"002078", "strokeOpacity":0.2, "strokeWidth":1, "fade":true, "fill":true, "fillColor":"86acd1", "fillOpacity":0.8, "shadow":false, "shadowColor":"000000", "shadowOpacity":0.6, "shadowX":4, "shadowY":"4", "shadowPosition":"outside", "shadowRadius":4}' />
      <area shape=poly coords=161,393,165,391,171,387,172,385,176,382,176,377,173,375,173,372,174,371,175,371,178,376,179,377,179,381,180,383,183,384,184,385,184,386,187,386,189,388,189,392,191,393,194,391,197,389,201,387,204,388,209,388,210,390,212,390,212,387,217,384,219,384,221,386,223,386,226,382,232,384,237,384,240,387,243,387,247,391,252,388,256,390,257,389,262,389,263,390,265,388,263,386,263,384,266,383,265,381,266,379,268,379,268,381,271,381,276,388,276,389,278,390,278,395,279,397,280,397,281,390,283,389,286,386,289,386,291,388,291,390,290,391,290,393,300,398,300,399,298,401,299,403,306,403,313,405,318,405,321,409,322,409,324,406,326,406,329,410,335,410,335,413,333,414,335,416,335,418,327,423,317,423,314,421,312,420,305,424,306,425,309,425,313,429,314,430,315,431,312,435,310,435,309,436,304,436,298,432,296,429,292,425,287,422,282,419,277,417,275,415,273,414,266,414,259,410,251,409,248,406,246,406,242,401,242,400,237,400,233,397,233,394,230,394,227,392,221,392,220,391,218,393,216,393,214,394,211,398,209,402,208,404,205,407,203,409,199,411,198,412,194,410,190,409,186,406,184,405,183,406,180,404,179,405,178,407 href="#" target="_self" alt="Corinthian Gulf" title="Corinthian Gulf" data-maphilight='{"stroke":false, "strokeColor":"002078", "strokeOpacity":0.2, "strokeWidth":1, "fade":true, "fill":true, "fillColor":"cedeed", "fillOpacity":0.8, "shadow":false, "shadowColor":"000000", "shadowOpacity":0.6, "shadowX":4, "shadowY":"4", "shadowPosition":"outside", "shadowRadius":4}' />
      <area shape=poly coords=10,199,95,240,92,244,91,244,89,243,89,247,86,248,83,257,87,259,92,259,91,264,90,265,92,267,92,269,88,268,89,272,92,273,92,279,94,282,97,284,100,285,108,285,108,292,110,294,113,295,114,299,117,303,121,306,123,307,127,311,127,321,129,321,129,319,134,320,132,318,128,317,128,314,132,311,132,306,134,305,136,305,137,307,137,310,140,310,140,308,141,308,145,310,146,313,148,313,150,316,153,316,154,313,156,312,159,312,164,320,162,322,162,326,164,327,165,333,163,334,162,333,162,331,159,328,158,329,156,334,155,332,151,328,152,326,148,326,148,324,146,324,142,326,144,325,140,326,138,325,137,326,131,326,129,326,133,329,133,332,128,333,128,336,127,338,130,339,130,342,136,338,139,338,140,340,142,351,145,352,149,352,149,356,151,359,151,370,154,367,157,367,157,370,156,373,160,380,160,385,158,385,157,388,160,388,160,392,161,394,179,408,179,412,178,414,174,422,171,426,168,429,164,433,161,434,158,433,156,437,156,441,159,442,164,444,168,446,171,449,173,445,173,459,172,461,178,461,182,464,185,468,189,470,193,473,197,479,200,484,203,491,204,495,205,499,204,503,202,505,198,510,195,512,193,515,193,522,73,573, href="#" target="_self" alt="" title="Ionian Islands" data-    maphilight='{"stroke":false, "strokeColor":"cc0000", "strokeOpacity":0.5, "strokeWidth":1,     "fade":true, "fill":true, "fillColor":"3576b6", "fillOpacity":0.8, "shadow":false,     "shadowColor":"000000", "shadowOpacity":0.6, "shadowX":4, "shadowY":"4",     "shadowPosition":"outside", "shadowRadius":4}' />
    </div>
  </map>
</div>

The problem I have now, is that when I check the box nothing appears. However the image appears when no radio button is selected, but the first image also shows. I would like only the image of the checkbox to be shown.

CodePen