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 & 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>
$('#some-id')
will result indocument.getElementById('some-id')
. – insertusernamehere Sep 8 '16 at 19:23