title: Image Checkbox List is not work properly
body: <p>Please Look at the URL:  <a href="http://www.supereleman.com/test/2.html" rel="nofollow">http://www.supereleman.com/test/2.html</a></p>
  
  <p>When ı click the text, checkbox is selected. But (reverse of this) when ı clicked to image, text and image have not been clicked..</p>
  
  <p>What must ı do for when ı clicked to image, checkbox is selected?</p>
  
  <p>My code;</p>
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="custom-form-elements.js"&gt;&lt;/script&gt;
  
  &lt;style&gt;
  .multiselect {
  width:10em;
  height:5em;
  border:solid 1px #c0c0c0;
  overflow:auto;
  }
  
  .multiselect label {
  display:block;
  }
  
  .multiselect-on {
  color:#ffffff;
  background-color:#3399ff;
  }
  &lt;/style&gt;
  &lt;link href="form.css" rel="stylesheet" type="text/css" /&gt;
  
  &lt;script&gt;
  jQuery.fn.multiselect = function() {
  $(this).each(function() {
      var checkboxes = $(this).find("input:checkbox");
      checkboxes.each(function() {
          var checkbox = $(this);
          // Highlight pre-selected checkboxes
          if (checkbox.attr("checked"))
              checkbox.parent().addClass("multiselect-on");
  
          // Highlight checkboxes that the user selects
          checkbox.click(function() {
              if (checkbox.attr("checked"))
                  checkbox.parent().addClass("multiselect-on");
              else
                  checkbox.parent().removeClass("multiselect-on");
          });
      });
  });
  };
  
  $(function() {
   $(".multiselect").multiselect();
  });
  
  
  &lt;/script&gt;
  
  
  &lt;style&gt;
  
  label
  {
  line-height:25px;
  }
  
   &lt;/style&gt;
  
  
  
  
   &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
   &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;&lt;div class="multiselect"&gt;
  &lt;label&gt;&lt;input type="checkbox" name="option[]" value="1"  class="styled" /&gt;Green&lt;/label&gt;
  &lt;label&gt;&lt;input type="checkbox" name="option[]" value="2"  class="styled"/&gt;Red&lt;/label&gt;
  &lt;label&gt;&lt;input type="checkbox" name="option[]" value="3"  class="styled"/&gt;Blue&lt;/label&gt;
  &lt;label&gt;&lt;input type="checkbox" name="option[]" value="4"  class="styled"/&gt;Orange&lt;/label&gt;
  &lt;label&gt;&lt;input type="checkbox" name="option[]" value="5"  class="styled"/&gt;Purple&lt;/label&gt;
  &lt;label&gt;&lt;input type="checkbox" name="option[]" value="6"  class="styled"/&gt;Black&lt;/label&gt;
  &lt;label&gt;&lt;input type="checkbox" name="option[]" value="7"  class="styled"/&gt;White&lt;/label&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>custom-form-elements.js</p>
  
  <pre><code>                var checkboxHeight = "25";
              var radioHeight = "25";
              var selectWidth = "190";
  
  
              /* No need to change anything after this */
  
  
              document.write('&lt;style type="text/css"&gt;input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }&lt;/style&gt;');
  
              var Custom = {
                  init: function() {
                      var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
                      for(a = 0; a &lt; inputs.length; a++) {
                          if((inputs[a].type == "checkbox" || inputs[a].type == "radio") &amp;&amp; inputs[a].className.indexOf("styled") &gt; -1) {
                              span[a] = document.createElement("span");
                              span[a].className = inputs[a].type;
  
                              if(inputs[a].checked == true) {
                                  if(inputs[a].type == "checkbox") {
                                      position = "0 -" + (checkboxHeight*2) + "px";
                                      span[a].style.backgroundPosition = position;
                                  } else {
                                      position = "0 -" + (radioHeight*2) + "px";
                                      span[a].style.backgroundPosition = position;
                                  }
                              }
                              inputs[a].parentNode.insertBefore(span[a], inputs[a]);
                              inputs[a].onchange = Custom.clear;
                              if(!inputs[a].getAttribute("disabled")) {
                                  span[a].onmousedown = Custom.pushed;
                                  span[a].onmouseup = Custom.check;
                              } else {
                                  span[a].className = span[a].className += " disabled";
                              }
                          }
                      }
                      inputs = document.getElementsByTagName("select");
                      for(a = 0; a &lt; inputs.length; a++) {
                          if(inputs[a].className.indexOf("styled") &gt; -1) {
                              option = inputs[a].getElementsByTagName("option");
                              active = option[0].childNodes[0].nodeValue;
                              textnode = document.createTextNode(active);
                              for(b = 0; b &lt; option.length; b++) {
                                  if(option[b].selected == true) {
                                      textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
                                  }
                              }
                              span[a] = document.createElement("span");
                              span[a].className = "select";
                              span[a].id = "select" + inputs[a].name;
                              span[a].appendChild(textnode);
                              inputs[a].parentNode.insertBefore(span[a], inputs[a]);
                              if(!inputs[a].getAttribute("disabled")) {
                                  inputs[a].onchange = Custom.choose;
                              } else {
                                  inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
                              }
                          }
                      }
                      document.onmouseup = Custom.clear;
                  },
                  pushed: function() {
                      element = this.nextSibling;
                      if(element.checked == true &amp;&amp; element.type == "checkbox") {
                          this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
                      } else if(element.checked == true &amp;&amp; element.type == "radio") {
                          this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
                      } else if(element.checked != true &amp;&amp; element.type == "checkbox") {
                          this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
                      } else {
                          this.style.backgroundPosition = "0 -" + radioHeight + "px";
                      }
                  },
                  check: function() {
                      element = this.nextSibling;
                      if(element.checked == true &amp;&amp; element.type == "checkbox") {
                          this.style.backgroundPosition = "0 0";
                          element.checked = false;
                      } else {
                          if(element.type == "checkbox") {
                              this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
                          } else {
                              this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
                              group = this.nextSibling.name;
                              inputs = document.getElementsByTagName("input");
                              for(a = 0; a &lt; inputs.length; a++) {
                                  if(inputs[a].name == group &amp;&amp; inputs[a] != this.nextSibling) {
                                      inputs[a].previousSibling.style.backgroundPosition = "0 0";
                                  }
                              }
                          }
                          element.checked = true;
                      }
                  },
                  clear: function() {
                      inputs = document.getElementsByTagName("input");
                      for(var b = 0; b &lt; inputs.length; b++) {
                          if(inputs[b].type == "checkbox" &amp;&amp; inputs[b].checked == true &amp;&amp; inputs[b].className.indexOf("styled") &gt; -1) {
                              inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
                          } else if(inputs[b].type == "checkbox" &amp;&amp; inputs[b].className.indexOf("styled") &gt; -1) {
                              inputs[b].previousSibling.style.backgroundPosition = "0 0";
                          } else if(inputs[b].type == "radio" &amp;&amp; inputs[b].checked == true &amp;&amp; inputs[b].className.indexOf("styled") &gt; -1) {
                              inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
                          } else if(inputs[b].type == "radio" &amp;&amp; inputs[b].className.indexOf("styled") &gt; -1) {
                              inputs[b].previousSibling.style.backgroundPosition = "0 0";
                          }
                      }
                  },
                  choose: function() {
                      option = this.getElementsByTagName("option");
                      for(d = 0; d &lt; option.length; d++) {
                          if(option[d].selected == true) {
                              document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
                          }
                      }
                  }
              }
              window.onload = Custom.init;
  </code></pre>