2
\$\begingroup\$

I am trying to get to grips with native JavaScript and wean myself off jQuery, so as an exercise, I wrote the following to check or uncheck checkboxes depending on which link is clicked.

Could this have been written more concisely? Does it follow what you would consider to be best practise?

  <ul>
    <li><a href="javascript:;" id="selectAll4k-ultra-hdtv">Select All</a> / <a href="javascript:;" id="deselectAll4k-ultra-hdtv">Deselect All</a></li>
    <li><label><input type="checkbox" name="cat[]" class="filterCheck 4k-ultra-hdtv" value="358">4K 50" - 59"</label></li>
    <li><label><input type="checkbox" name="cat[]" class="filterCheck 4k-ultra-hdtv" value="359">4K 60" - 69"</label></li>
    <li><label><input type="checkbox" name="cat[]" class="filterCheck 4k-ultra-hdtv" value="360">4K 70" UP</label></li>
    <li><label><input type="checkbox" name="cat[]" class="filterCheck 4k-ultra-hdtv" value="356">4K 30" - 39"</label></li>
    <li><label><input type="checkbox" name="cat[]" class="filterCheck 4k-ultra-hdtv" value="357">4K 40" - 49"</label></li>
  </ul>
  <ul>
    <li><a href="javascript:;" id="selectAllav-distribution">Select All</a> / <a href="javascript:;" id="deselectAllav-distribution">Deselect All</a></li>
    <li><label><input type="checkbox" name="cat[]" class="filterCheck av-distribution" value="431">Transmitters &amp; Receivers</label></li>
    <li><label><input type="checkbox" name="cat[]" class="filterCheck av-distribution" value="432">Distribution Amplifiers</label></li>
    <li><label><input type="checkbox" name="cat[]" class="filterCheck av-distribution" value="433">Converters</label></li>
    <li><label><input type="checkbox" name="cat[]" class="filterCheck av-distribution" value="434">Splitters</label></li>
    <li><label><input type="checkbox" name="cat[]" class="filterCheck av-distribution" value="435">Switchers</label></li>
    <li><label><input type="checkbox" name="cat[]" class="filterCheck av-distribution" value="436">Wall Plates</label></li>
    <li><label><input type="checkbox" name="cat[]" class="filterCheck av-distribution" value="437">Wireless Adapters</label></li>
    <li><label><input type="checkbox" name="cat[]" class="filterCheck av-distribution" value="438">A/V Distribution Accessories</label></li>
    <li><label><input type="checkbox" name="cat[]" class="filterCheck av-distribution" value="487">Extenders</label></li>
  </ul>

<script type="text/javascript">
// <![CDATA[

  // replace document.querySelectorAll with $ as per jQuery
  var $ = function ( elem ) {
    return document.querySelectorAll( elem ); // will return a node list that needs to be looped through
  } 

  var allCheckboxes = function(event, actionParam) { // function to check/uncheck checkboxes as required - actionParam denotes whether we select or deselect

    event.preventDefault();  // we don't want the link to be followed (default browser behavior)
    var target = event.target; // get the event target (what `this` would refer to in jQuery)
    var checkboxClass = target.id.replace(actionParam,''); // remove the specified text to leave the required class name
    console.log(checkboxClass); // prints checkbox class that we will target

    var chkboxCollection = document.getElementsByClassName(checkboxClass); // puts all the checkboxes with that class into a node list that we can loop thru

    for (var i = 0; i < chkboxCollection.length; i++) { // loop through matching checkboxes in node list created above
      if(actionParam == 'selectAll'){
        chkboxCollection[i].checked = true; // check all related checkboxes
      } else {
        chkboxCollection[i].checked = false; // uncheck all related checkboxes
      }
    }

  }

  // Select all id's starting with [name^="value"]  
  for(var i = 0; i < $('[id^="selectAll"]').length; i++) { // loop thru all elements starting with...
    $('[id^="selectAll"]')[i].addEventListener( 'click', function(event) { 
      allCheckboxes.call(this, event, 'selectAll'); // allCheckboxes.call(this, event, actionParam)
    }, false);
  }

  for(var i = 0; i < $('[id^="deselectAll"]').length; i++) {
    $('[id^="deselectAll"]')[i].addEventListener( 'click', function(event) {
      allCheckboxes.call(this, event, 'deselectAll'); // allCheckboxes.call(this, event, actionParam)
    }, false);
  }
// ]]>
</script>
\$\endgroup\$
  • \$\begingroup\$ Welcome to Code Review! I hope you get some great answers. \$\endgroup\$ – Phrancis Sep 7 '16 at 23:06
  • \$\begingroup\$ As a note: In the comments you write "replace document.querySelectorAll with $ as per jQuery", which is a bit misleading. jQuery tries to match the selector with a native one that has the best performance and that is supported by the browser. For example $('#some-id') will result in document.getElementById('some-id'). \$\endgroup\$ – insertusernamehere Sep 8 '16 at 19:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.