title: Select and Focus a Checkbox Input using Javascript
body: <p>I have a <strong>checkbox</strong> which is auto-generated from php, which is used to filter out search results depending on state. Additionally, a user can select district too to filter out results. In case a person selects a particular district instead of state, i want to automatically select the right state for that district using JavaScript and be able to focus. How can i use JavaScript code to <strong>select any checkbox</strong> and <strong>focus</strong> on it using <strong>JavaScript?</strong> Any assistance is much appreciated.</p>
  
  <p><a href="https://jsfiddle.net/Tamimi89/csLxsm05/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <pre><code>&lt;li class="cp_state"&gt;
      &lt;label class="title"&gt;State&lt;/label&gt;
      &lt;div class="handle close dashicons-before"&gt;&lt;/div&gt;
          &lt;div class="element"&gt;   
          &lt;div class="scrollbox"&gt;
          &lt;ol class="checkboxes"&gt;
              &lt;li&gt;&lt;input type="checkbox" name="cp_state[]" value="Johor"  /&gt;&amp;nbsp;&lt;label for="cp_state[]"&gt;Johor&lt;/label&gt;&lt;/li&gt;
              &lt;li&gt;&lt;input type="checkbox" name="cp_state[]" value="Kedah"  /&gt;&amp;nbsp;&lt;label for="cp_state[]"&gt;Kedah&lt;/label&gt;&lt;/li&gt;
              &lt;li&gt;&lt;input type="checkbox" name="cp_state[]" value="Kelantan"  /&gt;&amp;nbsp;&lt;label for="cp_state[]"&gt;Kelantan&lt;/label&gt;&lt;/li&gt;
              &lt;li&gt;&lt;input type="checkbox" name="cp_state[]" value="Wilayah Persekutuan Kuala Lumpur"  /&gt;&amp;nbsp;&lt;label for="cp_state[]"&gt;Wilayah Persekutuan Kuala Lumpur&lt;/label&gt;&lt;/li&gt;
              &lt;li&gt;&lt;input type="checkbox" name="cp_state[]" value="Wilayah Persekutuan Labuan"  /&gt;&amp;nbsp;&lt;label for="cp_state[]"&gt;Wilayah Persekutuan Labuan&lt;/label&gt;&lt;/li&gt;
              &lt;li&gt;&lt;input type="checkbox" name="cp_state[]" value="Melaka"  /&gt;&amp;nbsp;&lt;label for="cp_state[]"&gt;Melaka&lt;/label&gt;&lt;/li&gt;
              &lt;li&gt;&lt;input type="checkbox" name="cp_state[]" value="Negeri Sembilan"  /&gt;&amp;nbsp;&lt;label for="cp_state[]"&gt;Negeri Sembilan&lt;/label&gt;&lt;/li&gt;
              &lt;li&gt;&lt;input type="checkbox" name="cp_state[]" value="Pahang"  /&gt;&amp;nbsp;&lt;label for="cp_state[]"&gt;Pahang&lt;/label&gt;&lt;/li&gt;
              &lt;li&gt;&lt;input type="checkbox" name="cp_state[]" value="Wilayah Persekutuan Putra Jaya"  /&gt;&amp;nbsp;&lt;label for="cp_state[]"&gt;Wilayah Persekutuan Putra Jaya&lt;/label&gt;&lt;/li&gt;
              &lt;li&gt;&lt;input type="checkbox" name="cp_state[]" value="Perlis"  /&gt;&amp;nbsp;&lt;label for="cp_state[]"&gt;Perlis&lt;/label&gt;&lt;/li&gt;
              &lt;li&gt;&lt;input type="checkbox" name="cp_state[]" value="Pulau Pinang"  /&gt;&amp;nbsp;&lt;label for="cp_state[]"&gt;Pulau Pinang&lt;/label&gt;&lt;/li&gt;
              &lt;li&gt;&lt;input type="checkbox" name="cp_state[]" value="Perak"  /&gt;&amp;nbsp;&lt;label for="cp_state[]"&gt;Perak&lt;/label&gt;&lt;/li&gt;
              &lt;li&gt;&lt;input type="checkbox" name="cp_state[]" value="Sabah"  /&gt;&amp;nbsp;&lt;label for="cp_state[]"&gt;Sabah&lt;/label&gt;&lt;/li&gt;
              &lt;li&gt;&lt;input type="checkbox" name="cp_state[]" value="Selangor"  /&gt;&amp;nbsp;&lt;label for="cp_state[]"&gt;Selangor&lt;/label&gt;&lt;/li&gt;
              &lt;li&gt;&lt;input type="checkbox" name="cp_state[]" value="Sarawak"  /&gt;&amp;nbsp;&lt;label for="cp_state[]"&gt;Sarawak&lt;/label&gt;&lt;/li&gt;
              &lt;li&gt;&lt;input type="checkbox" name="cp_state[]" value="Terengganu"  /&gt;&amp;nbsp;&lt;label for="cp_state[]"&gt;Terengganu&lt;/label&gt;&lt;/li&gt;
          &lt;/ol&gt; &lt;!-- #checkbox-wrap --&gt;
          &lt;/div&gt; &lt;!-- #end scrollbox --&gt;
          &lt;/div&gt; &lt;!-- #end element --&gt;
      &lt;div class="clr"&gt;&lt;/div&gt;
  &lt;/li&gt;
  </code></pre>