title: Unchecking and simulating a click on checkboxes in Javascript
body: <p>I am admittedly a super newbie to programming in general. I am trying to design a quick piece of javascript to inject on a website for a class that will both uncheck and simulate a click on a series of checkboxes. This is nothing malicious, the web form we use to download data for use in this class presents way more variables than necessary, and it would be a lot more convenient if we could 'uncheck' all and only check the ones we want. However, simply unchecking the boxes via javascript injection doesn't yield the desired result. A mouse click must be simulated on each box. I have been trying to use the .click() function to no avail. Any help is greatly appreciated. My code below fails with an error of:</p>
  
  <p>"TypeError: Cannot read property 'click' of null"</p>
  
  <p>CODE:</p>
  
  <pre><code> var getInputs = document.getElementsByTagName("input");
   for (var i = 0, max = getInputs.length; i &lt; max; i++){
   if (getInputs[i].type === 'checkbox')
   getInputs[i].checked = false;
   document.getElementById('shr_SUBJECT=VC' + i).click();
   }
  </code></pre>
  
  <p><strong>--------EDIT#1--------------</strong>  </p>
  
  <p>FYI, this is the website that I am trying to use this on:  </p>
  
  <p><a href="http://factfinder2.census.gov/faces/nav/jsf/pages/searchresults.xhtml" rel="nofollow">http://factfinder2.census.gov/faces/nav/jsf/pages/searchresults.xhtml</a></p>
  
  <p>if you search for and open up any of these tables they are huge. It would be awesome if I could easily pare down the variables by 'unchecking' and 'clicking' them all at once via javascript.</p>
  
  <p><strong>The code at the bottom ALMOST works.</strong><br>
  The problem I am running into now is that it throws an error after the first or second run through the for loop:  </p>
  
  <pre><code> "TypeError: document.getElementById(...) is null"
  </code></pre>
  
  <p>I understand that this is because the value it's trying to find doesn't exist? Sometimes on these tables the checkboxes are greyed out/don't exist or are otherwise 'unclickable'. My theory as to why I am getting this error is because in the table/form the 'available' ID's will start around:  </p>
  
  <pre><code>shr_SUBJECT=VC03 or sh_SUBJECT=VC04
  </code></pre>
  
  <p>and it may then skip to:    </p>
  
  <pre><code>shr_SUBJECT=VC06 then skip to shr_SUBJECT=VC09 and so on...  
  </code></pre>
  
  <p>So if the for loop hits an ID that isn't available such as 05 or 07, it returns a null error :(  </p>
  
  <p>I did some reading and learned that javascript is able to 'catch' errors that are 'thrown' at it? My question now is that I'm wondering if there is an easy way to simply iterate to the next ID in line if this error is thrown.  </p>
  
  <p>Again, any and all help is appreciated, you guys are awesome.  </p>
  
  <p><strong>OLD DRAFT OF SCRIPT</strong></p>
  
  <pre><code>var getInputs = document.getElementsByTagName("input");
  for (var i = 3, max = getInputs.length; i &lt; max; i++){
  if (getInputs[i].type === 'checkbox' &amp;&amp; i &lt; 10){
   var count = i;
   var endid = count.toString();
   var begid = "shr_SUBJECT=VC0";
   var fullid = begid.concat(endid);
   document.getElementById(fullid).click();
   }
   else if(getInputs[i].type === 'checkbox' &amp;&amp; i &gt;= 10){
   var count = i ;
   var endid = count.toString();
   var begid = "shr_SUBJECT=VC";
   var fullid = begid.concat(endid);
   document.getElementById(fullid).click();
   }
   }
  </code></pre>
  
  <p><strong>--------EDIT#2----------</strong></p>
  
  <p>An example of a table that I am trying to manipulate can be found at this URL:</p>
  
  <p><a href="http://factfinder2.census.gov/faces/tableservices/jsf/pages/productview.xhtml?pid=ACS_12_5YR_DP02&amp;prodType=table#" rel="nofollow">http://factfinder2.census.gov/faces/tableservices/jsf/pages/productview.xhtml?pid=ACS_12_5YR_DP02&amp;prodType=table#</a></p>
  
  <p>If you click on the 'Modify Table' button, you are able to select/deselect specific variables via the checkboxes. If you right-click on a couple of 'active' checkboxes and inspect the elements, and it looks something like this:  </p>
  
  <pre><code> &lt;input id="shr_SUBJECT=VC03" checked="" alt="hide SUBJECT=VC03" name="" value="" onclick="javascript:hiderow('SUBJECT=VC03');" type="checkbox"&gt;
  
  
   &lt;input id="shr_SUBJECT=VC25" checked="" alt="hide SUBJECT=VC25" name="" value="" onclick="javascript:hiderow('SUBJECT=VC25');" type="checkbox"&gt;
  </code></pre>
  
  <p>Thank you so much @Jonathan Steinbeck for the tip about the ternary operator, it really cleaned up my code.</p>
  
  <p>The script works properly, but the problem I am running into now is that it doesn't iterate enough times after the try, catch statement. If there is a gap in the id #'s; say it jumps from shr_SUBJECT=VC19 to shr_SUBJECT=VC=24 the script will stop running. Is there a way to make it keep retrying the try/catch until it gets a valid ID # or one that exists/is an active checkbox?</p>
  
  <p><strong>CURRENT DRAFT OF SCRIPT :</strong></p>
  
  <pre><code>var getInputs = document.getElementsByTagName("input");
  for (var i = 3, max = getInputs.length; i &lt; max; i += 1) {
  try {
      if (getInputs[i].type === 'checkbox'){
          document.getElementById("shr_SUBJECT=VC" + (i &lt; 10 ? "0" : "") + i).click();
          }
  
      }   
  
  catch (err) {
     i+=1;
     if (getInputs[i].type === 'checkbox'){
          if (getInputs[i].type === 'checkbox'){
          document.getElementById("shr_SUBJECT=VC" + (i &lt; 10 ? "0" : "") + i).click();
          }
      }
     }
  }
  </code></pre>