title: Shift + Click to Select a Range of Checkboxes
body: <p>I have large tables being generated and each row has a checkbox, class "chcktbl".</p>
  
  <p>In the table header, there is a Select All checkbox, class "chckHead".</p>
  
  <p>The select/deselect all function works fine, as does the count of selected charts I have displayed in the table heading. </p>
  
  <p>The function to enable shift+click capability to select a range of checkboxes also works, but in its current format, only selects 10 checkboxes before generating an error message in a popup window:</p>
  
  <p>"Stop running this script? A script on this page is causing your web browser to run slowly. If it continues to run, your computer might become unresponsive."</p>
  
  <pre><code>&lt;script type=text/javascript&gt;
  
  
          //select all button
          $('#chckHead').click(function() {
  
              if (this.checked === false) {
                  $('.chcktbl:checked').attr('checked', false);
              }
              else {
                  $('.chcktbl:not(:checked)').attr('checked', true);
              }
              countSelected();
  
          });
  
  //count number of boxes checked        
  function countSelected() {
              var numCharts = $('input.chcktbl:checked').length;
              $('#numCharts').html(numCharts);
  
          }
  
  
          //SHIFT+Click to select a range of checkboxes:
  
          // this variable stores the most recently clicked checkbox
      // it is used for shift-clicks
      var lastClickedBox = 0;
  
      // the checkbox functionality is default to the browser
      $('.chcktbl').click(function(event) {
          var clickedBox = $('.chcktbl').index(event.target);
          if(event.shiftKey) {
              setCheckboxes(lastClickedBox, clickedBox);
          };
          lastClickedBox = clickedBox;
                      countSelected();
      });
  
  
      // sets all the checkboxes between the specified indices to true
  
      function setCheckboxes(end, start) {
          if(start &gt; end) {
              var temp = start;
              start = end;
              end = temp;
          };
          for(var i = start; i &lt; end; i++) {  
          $('.chcktbl').eq(i).prop('checked', true);
          };
                      countSelected();
      };
  
      &lt;/script&gt;
  </code></pre>
  
  <p>This is a really common feature for selecting a range of items with one click, but I can't find an efficient way to do it. If anyone knows a better way of approaching this or can spot some inefficiency in the code then please let me know.</p>