title: How to click the checkbox using Selenium WebDriver and C#
body: <p>What I'm trying to do is click on (or off) any of the checkboxes on my page.  As you can see from the HTML, each checkbox element would appear to have a unique identifier but when I try to click on it, I get an "Element not found" exception. I've tried all the standard locators (there's no iframe either) -- 
  I can find the checkbox element, ok but just can't click on it.  </p>
  
  <p>Please view the following HTML:</p>
  
  <pre><code>&lt;div class="form-horizontal"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-3"&gt;
              &lt;label for="Url_option1"&gt;Option 1&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-1"&gt;
              &lt;input type="checkbox" data-yesno-name="Url_option1" class="url-field-toggle"&gt;
              &lt;span class="glyphicon clickable glyphicon-remove" id="toggle_undefined"&gt;&lt;/span&gt;
              &lt;input id="Url_url_option1" name="Url.url_option1" type="hidden" value="no"&gt; &amp;nbsp;
          &lt;/div&gt;
          &lt;div class="col-sm-3"&gt;
              &lt;label for="Url_option2"&gt;Option 2&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-1"&gt;
              &lt;input type="checkbox" data-yesno-name="Url_option2" class="url-field-toggle"&gt;
              &lt;span class="glyphicon clickable glyphicon-remove" id="toggle_undefined"&gt;&lt;/span&gt;
              &lt;input id="Url_translation_c" name="Url.option2" type="hidden" value="no"&gt; &amp;nbsp;
          &lt;/div&gt;
          &lt;div class="col-sm-3"&gt;
              &lt;label for="Url_option3"&gt;Option 3&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-1"&gt;
              &lt;input type="checkbox" data-yesno-name="Url_option3" class="url-field-toggle"&gt;
              &lt;span class="glyphicon clickable glyphicon-remove" id="toggle_undefined"&gt;&lt;/span&gt;
              &lt;input id="Url_option3" name="Url.option3" type="hidden" value="no"&gt; &amp;nbsp;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-12"&gt;
              &amp;nbsp;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-3"&gt;
              &lt;label for="Url_option4"&gt;Option 4&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-1"&gt;
              &lt;input type="checkbox" data-yesno-name="Url_option4" class="url-field-toggle"&gt;
              &lt;span class="glyphicon clickable glyphicon-remove" id="toggle_undefined"&gt;&lt;/span&gt;
              &lt;input id="Url_option4" name="Url.option4" type="hidden" value="no"&gt; &amp;nbsp;
          &lt;/div&gt;
          &lt;div class="col-sm-3"&gt;
              &lt;label for="Url_option5"&gt;Option 5&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-1"&gt;
              &lt;input type="checkbox" data-yesno-name="Url_option5" class="url-field-toggle"&gt;
              &lt;span class="glyphicon clickable glyphicon-remove" id="toggle_undefined"&gt;&lt;/span&gt;
              &lt;input id="Url_option5" name="Url.option5" type="hidden" value="no"&gt; &amp;nbsp;
          &lt;/div&gt;
          &lt;div class="col-sm-3"&gt;
              &lt;label for="Url_option6"&gt;Option 6&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-1"&gt;
              &lt;input type="checkbox" data-yesno-name="Url_option6" class="url-field-toggle"&gt;
              &lt;span class="glyphicon clickable glyphicon-remove" id="toggle_undefined"&gt;&lt;/span&gt;
              &lt;input id="Url_option6" name="Url.option6" type="hidden" value="no"&gt; &amp;nbsp;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The only way I can click on any of the check box elements is by locating the following element:</p>
  
  <pre><code>&lt;span class="glyphicon clickable glyphicon-remove" id="toggle_undefined"&gt;&lt;/span&gt;  
  </code></pre>
  
  <p>Using an XPath locator:</p>
  
  <pre><code>i.e //*[@id="toggle_undefined"]
  </code></pre>
  
  <p>The click event gets fired in this case but it will obviously only click on the first element (or checkbox in this case) on the page (I've over 20 checkboxes on the page).</p>
  
  <p>Based on the HTML code above, let's say I wanted to enable the second checkbox element on row two. Here is the code for this checkbox element:</p>
  
  <pre><code>&lt;div class="col-sm-3"&gt;
      &lt;label for="Url_option5"&gt;Option 5&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="col-sm-1"&gt;
      &lt;input type="checkbox" data-yesno-name="Url_option5" class="url-field-toggle"&gt;
      &lt;span class="glyphicon clickable glyphicon-remove" id="toggle_undefined"&gt;&lt;/span&gt;
      &lt;input id="Url_option5" name="Url.option5" type="hidden" value="no"&gt; &amp;nbsp;
  &lt;/div&gt;
  </code></pre>
  
  <p>Based on the info above I can only click the checkbox by finding and clicking on the following element:</p>
  
  <pre><code>&lt;span class="glyphicon clickable glyphicon-remove" id="toggle_undefined"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>How am I supposed to create a unique XPath locator for this element that I could use to click on any of the checkboxes on my page?</p>