title: Check radio button programmatically is not working in every browser
body: <p>I need to check a radio button based on the path in the URL.</p>
  
  <pre><code>$(document).ready(function () {
      function make_url() {
          var results_url = window.location.pathname.split("/");
  
          console.log(results_url); // ["", "tradeshows"]
  
          if (results_url[1] == "tradeshows") {
              $("#radio2").attr('checked', 'checked');
          } else if (results_url[2] == "tradeshows") {
              $("#radio2").attr('checked', 'checked');
          }
      }
  });
  
  &lt;ul class="cd-filter-content cd-filters list" id="radioButtons" onChange="make_url();" style="display: block; padding:0px;"&gt;
      &lt;li&gt;
          &lt;input type="radio" checked="" id="radio1" name="radioButton" value="" data-filter=".radio2" class="filter"&gt;
          &lt;label for="radio1" class="radio-label"&gt;All Events&lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;input type="radio" id="radio2" name="radioButton" data-filter=".radio3" class="filter" value="1"&gt;
          &lt;label for="radio2" class="radio-label" id="trade"&gt;Trade Shows&lt;/label&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The code is working fine on my local file system, but not on the server.</p>
  
  <p>When I try it from the console, everytrhing works fine:</p>
  
  <pre><code>$("#radio2").attr('checked','checked');
  </code></pre>
  
  <p>I also tried it with vanilla JavaScript:</p>
  
  <pre><code>document.getElementById('radio2').checked = true;
  console.log(document.getElementById('radio2').checked); // false
  </code></pre>
  
  <p>And I tried a different solution with jQuery:</p>
  
  <pre><code>$('#radio2').prop('checked', true); // Uncaught TypeError: Cannot set property 'checked' of null
  </code></pre>