title: Change image in specified div when checkboxes are selected
body: <p>I am wanting to display an image in a div when checkboxes or buttons are selected. I need to to be able to select multiple boxes and display a different image based on the total selection. </p>
  
  <p>The selection matrix would be as follows: A, B, C, D, AB, AC, AD, BC, BD, ABC, ABD. C and D cannot appear together. When nothing is selected I want it to display image F. </p>
  
  <p>I was also hoping to use Bootstrap styling to make them look like buttons not checkboxes.</p>
  
  <pre><code>&lt;div&gt;
      &lt;form name="test1"&gt; 
          &lt;div data-toggle="buttons" class="btn-group itemcontent"&gt;
              &lt;label class="btn btn-default"&gt;&lt;input type="checkbox" name="myimages" value="01" id="myimages" onclick="check_value(1)" /&gt;Selector1&lt;/label&gt;
              &lt;label class="btn btn-default"&gt;&lt;input type="checkbox" name="myimages" value="02" id="myimages" onclick="check_value(2)" /&gt;Selector2&lt;/label&gt;
              &lt;label class="btn btn-default"&gt;&lt;input type="checkbox" name="myimages" value="03" id="myimages" onclick="check_value(3)" /&gt;Selector3&lt;/label&gt;
              &lt;label class="btn btn-default"&gt;&lt;input type="checkbox" name="myimages" value="04" id="myimages" onclick="check_value(4)" /&gt;Selector4&lt;/label&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I was thinking of using a script like this:</p>
  
  <pre><code>function check_value(fieldvalue)
  {    
      switch(fieldvalue)
      {
          case 1:
  
              document.getElementById("imagetest").innerHTML = "&lt;img src='img/600/600T_W_Base_Model.png'&gt;";
                  break;
  
          case 2:
  
              document.getElementById("imagetest").innerHTML = "&lt;img src='img/600/600T_W_DW.png'&gt;"; 
                  break;
  </code></pre>
  
  <p>For my image display div:<code>&lt;div class="col-6" id="imagetest"&gt;&lt;/div&gt;</code></p>
  
  <p>But I'm honestly not sure where to go from here. I'm VERY new to JavaScript.</p>
  
  <p>Thank you! </p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>With a friends help we were able to come up with a test, but I can't get the code to work correctly...</p>
  
  <pre><code>            &lt;!DOCTYPE html&gt;
          &lt;html&gt;
  
          &lt;head&gt;
          &lt;title&gt;Test &lt;/title&gt;
          &lt;script src="https://cdnjs.cloudflare.com/.../jquery/1.12.4/jquery.js"&gt;&lt;/script&gt;
          &lt;script src="https://cdnjs.cloudflare.com/.../jque.../1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/.../jqu.../1.12.1/jquery-ui.css" /&gt;
          &lt;script src="https://cdnjs.cloudflare.com/.../3.3.6/js/bootstrap.js"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/.../3.3.6/css/bootstrap.css" /&gt;
          &lt;style type="text/css"&gt;
          input {
          display: none;
          }
  
          input:checked ~ label {
          background: #00C000;
          border: 1px solid #090;
          color: #fff;
          }
  
          label {
          background: #ddd;
          -webkit-touch-callout: none;
          /* iOS Safari */
          -webkit-user-select: none;
          /* Chrome/Safari/Opera */
          -khtml-user-select: none;
          /* Konqueror */
          -moz-user-select: none;
          /* Firefox */
          -ms-user-select: none;
          /* Internet Explorer/Edge */
          user-select: none;
          /* Non-prefixed version, currently
          not supported by any browser */
          padding: 10px 30px;
          border: 1px solid #aaa;
          color: #555;
          }
          &lt;/style&gt;
          &lt;/head&gt;
  
          &lt;body&gt;
          &lt;div id="form1"&gt;
          &lt;form name="test"&gt;
          &lt;span&gt;&lt;input type="checkbox" id="chk1" onchange="check_value()" data-val="A"&gt;&lt;label for="chk1"&gt;A&lt;/label&gt;&lt;/span&gt;
          &lt;span&gt;&lt;input type="checkbox" id="chk2" onchange="check_value()" data-val="B"&gt;&lt;label for="chk2"&gt;B&lt;/label&gt;&lt;/span&gt;
          &lt;span&gt;&lt;input type="checkbox" id="chk3" onchange="check_value()" data-val="C"&gt;&lt;label for="chk3"&gt;C&lt;/label&gt;&lt;/span&gt;
          &lt;span&gt;&lt;input type="checkbox" id="chk4" onchange="check_value()" data-val="D"&gt;&lt;label for="chk4"&gt;D&lt;/label&gt;&lt;/span&gt;
          &lt;/form&gt;
          &lt;/div&gt;
          &lt;div id="imagetest" style="height:200px;width: 200px; border: 5px solid red;"&gt; 
          &lt;/div&gt;
          &lt;/body&gt;
          &lt;script type="text/javascript"&gt;
          function check_value()
          {
          var myVal = '';
          $("input[type=checkbox]").each(function()
          {
          if ($(this).is(':checked'))
          {
          myVal += $(this).data('val');
          }
          });
  
          alert(myVal);
  
          var myDiv = $('#imagetest');
          if (myVal == 'A')
          {
          myDiv.css('background-color', 'blue');
          }
          else if (myVal == 'B')
          {
          myDiv.css('background-color', 'green');
          }
          else if (myVal == 'C')
          {
          myDiv.css('background-color', 'grey');
          }
          else if (myVal == 'D')
          {
          myDiv.css('background-color', 'pink');
          }
          else if (myVal == 'AB')
          {
          myDiv.css('background-color', 'orange');
          }
          else if (myVal == 'AC')
          {
          myDiv.css('background-color', 'yellow');
          }
          else if (myVal == 'AD')
          {
          myDiv.css('background-color', 'black');
          }
          else if (myVal == 'BC')
          {
          myDiv.css('background-color', 'lightblue');
          }
          else if (myVal == 'BD')
          {
          myDiv.css('background-color', 'lightgreen');
          }
          else if (myVal == 'ABC')
          {
          myDiv.css('background-color', 'brown');
          }
          else if (myVal == 'ABD')
          {
          myDiv.css('background-color', 'Cyan');
          }
          else
          {
          myDiv.css('background-color', 'white');
          }
          }
          &lt;/script&gt;
          &lt;style type="text/css"&gt;
          input {
          display: none;
          }
  
          input:checked ~ label {
          background: #00C000;
          border: 1px solid #090;
          color: #fff;
          }
  
          label {
          background: #ddd;
          -webkit-touch-callout: none;
          /* iOS Safari */
          -webkit-user-select: none;
          /* Chrome/Safari/Opera */
          -khtml-user-select: none;
          /* Konqueror */
          -moz-user-select: none;
          /* Firefox */
          -ms-user-select: none;
          /* Internet Explorer/Edge */
          user-select: none;
          /* Non-prefixed version, currently
          not supported by any browser */
          padding: 10px 30px;
          border: 1px solid #aaa;
          color: #555;
          }
          &lt;/style&gt;
  
          &lt;/html&gt;
  </code></pre>
  
  <p>What am I doing wrong here..?</p>