title: Changing showcase image depending on what checkboxes are checked
body: <p><a href="http://codepen.io/silentsushix3/pen/gwvAPz" rel="nofollow">http://codepen.io/silentsushix3/pen/gwvAPz</a></p>
  
  <p>I am working on a site for a client. I am trying to make it so the product showcase image changes depending on the options the client has selected. For instance, if my client was selling shoes, their signature model is the "10010101". But the 10010101 stlye of shoes come in different colors, textures, and sizes. So depending on the options the client chooses it (blue, grunge, size14) it will change the showcase image to show the correct shoes. </p>
  
  <p>Currently I have my code for the showcase image. Which is</p>
  
  <pre><code>&lt;img width="325" height="325" src="http://www.teatimerest.com/page/wp-content/uploads/2016/09/Burger.png" class="attachment-shop_single size-shop_single wp-post-image" alt="burger" title="burger" srcset="http://www.teatimerest.com/page/wp-content/uploads/2016/09/Burger-66x66.png 66w, http://www.teatimerest.com/page/wp-content/uploads/2016/09/Burger-120x120.png 120w, http://www.teatimerest.com/page/wp-content/uploads/2016/09/Burger-150x150.png 150w, http://www.teatimerest.com/page/wp-content/uploads/2016/09/Burger-200x200.png 200w, http://www.teatimerest.com/page/wp-content/uploads/2016/09/Burger-300x300.png 300w, http://www.teatimerest.com/page/wp-content/uploads/2016/09/Burger.png 325w" sizes="(max-width: 325px) 100vw, 325px" style="display: block;" draggable="false"&gt;
  </code></pre>
  
  <p>My First Checkbox is:</p>
  
  <pre><code>&lt;input class="tmcp-field tm-product-image tm-epo-field tmcp-checkbox" name="tmcp_checkbox_0_0" data-limit="" data-exactlimit="" data-minimumlimit="" data-image="" data-imagep="" data-imagel="" data-price="" data-rules="[&amp;quot;&amp;quot;]" data-original-rules="[&amp;quot;&amp;quot;]" data-rulestype="[&amp;quot;&amp;quot;]" value="&lt;img src=&amp;quot;https://www.wendys.com/redesign/wendys/images/components/12.png&amp;quot;&gt;_0" id="tmcp_choice_0_0_1" tabindex="1" checked="checked" type="checkbox"&gt;
  &lt;label for="tmcp_choice_0_0_1"&gt;&lt;span class="tc-label tm-label"&gt;TOMATOES MOTHER FUCKER&lt;/span&gt;&lt;/label&gt;
  </code></pre>
  
  <p>My Second CheckBox is:</p>
  
  <pre><code>&lt;input class="tmcp-field tm-product-image tm-epo-field tmcp-checkbox" name="tmcp_checkbox_0_1" data-rules="[&amp;quot;&amp;quot;]" data-original-rules="[&amp;quot;&amp;quot;]" data-rulestype="[&amp;quot;&amp;quot;]" value="http://www.teatimerest.com/page/wp-content/uploads/2016/09/tamatoeslices.png_1" id="tmcp_choice_0_1_2" tabindex="2" checked="checked" type="checkbox"&gt;
  &lt;label for="tmcp_choice_0_1_2"&gt;&lt;span class="tc-label tm-label"&gt;CHEESE MOTHER FUCKER&lt;/span&gt;&lt;/label&gt;
  </code></pre>
  
  <p>My script is:</p>
  
  <pre><code>function changeImage() {
  
      if (document.getElementById("tmcp_choice_0_0_1").attr == "checked") 
      {
          document.getElementsByClassName("attachment-shop_single size-shop_single wp-post-image").src = "http://www.userinterfaceicons.com/80x80/maximize.png";
      }
  }
  </code></pre>
  
  <p>This is my first real javascript implementation so I am trying my best to do it on my own but have hit a wall. I cannot actually edit the html because it is created by wordpress. So that limits me(or as far as my noob butt knows) to a a listener because I cannot add onClick event to preexisting code.</p>
  
  <p>My Javascript is also not complete. I wanted to get the proof of concept working first before coding the javascript to check the options and return an image depending on the checked boxes. Any help would be GREATLY appreciated!</p>
  
  <p>Edited: i am trying to see if box1 and box2 are checked then display image1. If box 1 and box3(i know i dont have a 3 yet) but it would display image2 and if only box1 was checked it would  display image3</p>