title: why is a click on an element prompting a click on the checkbox next to it?
body: <p>I have the following code which consists of the questionmark which opens a modal window and a checkbox with its own label to its right. My problem is, every time I click on the questionmark to open the modal window I find that the checkbox is also clicked on. </p>
  
  <pre><code>
  &lt;!DOCTYPE html  &gt;
  &lt;html lang="en" style="background:  #fffff0;"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Title&lt;/title&gt;
          &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
      &lt;link rel="stylesheet" media="all" href="upload.css"&gt;
          &lt;script type=text/javascript src="https://code.jquery.com/jquery-3.4.1.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body &gt;&lt;div class="form-group"&gt;
                          &lt;label class="control-label col-md-4 col-lg-3" for="vertreterCheckbox" id="vertreterLbl"&gt;
                              &lt;div class="inline-help form-label" data-help="&amp;lt;b&amp;gt;Sie
    &amp;lt;/div&amp;gt;
  " data-heading="Wie kann ich verdeutlichen, dass ich lediglich als Stellvertreter auftrete?" data-help-key="offers.deputy"&gt;&lt;i onClick="keyDown(vertreterModal);myFunction('vertreterModal','vertreterOK')"  class="fa fa-question-circle-o" id="vertreterHilfe"&gt;&lt;/i&gt;&lt;/div&gt;in Vertretung&lt;/label&gt;
                          &lt;div class="col-md-8 col-lg-9"&gt;
                              &lt;div class="checkbox"&gt;
                                  &lt;input name="offer[deputy]" type="hidden" value="0"&gt;
                                  &lt;input type="checkbox" value="1" name="offer[deputy]" id="vertreterCheckbox"&gt;
                                  &lt;label for="vertreterCheckbox"  id="vertreterCheckboxLbl"&gt;in Vertretung&lt;/label&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;    
  
  
      &lt;script src="uploadScript.js" data-turbolinks-track="reload"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>
  
  <p>I tried to use the following .js code to bring the checkbox back to its previous state:</p>
  
  <pre><code>if(event.target.id==="vertreterHilfe"){
          if(document.getElementById("vertreterCheckbox").checked===true){
              document.getElementById("vertreterCheckbox").checked=false
          }else{
                          document.getElementById("vertreterCheckbox").checked=true
  
          }
      } 
  </code></pre>
  
  <p>But I don't really know html/javascript programming and feel like thats not a neat solution. I'd much rather find out, what's causing the problem behaviour and change it rather than a dirty workaround. How can I do it? </p>