JSFiddle - React, Tailwind, and code Playground

by Luke Marlow

HTML

<button class="tick">Select All</button> 
<button class="untick">De-Select All</button>

<div id="promo_djs_listing">
    <input type="checkbox" value="1"> Option<br />
    <input type="checkbox" value="1"> Option<br />
    <input type="checkbox" value="1"> Option<br />
    <input type="checkbox" value="1"> Option<br />
    <input type="checkbox" value="1"> Option<br />
    <input type="checkbox" value="1"> Option<br />
    <input type="checkbox" value="1"> Option<br />
    <input type="checkbox" value="1"> Option<br />
</div>

JavaScript

$(document).delegate('.tick, .untick', 'click', function(e) {
	e.preventDefault();
	var opt = $(this).attr('class');
	
	if (opt == 'tick') {
		$('#promo_djs_listing input[type="checkbox"]').each(function() { $(this).attr('checked', 'checked'); });
	} else if (opt == 'untick') {
		$('#promo_djs_listing input[type="checkbox"]').each(function() { $(this).removeAttr('checked'); });
	}
});

/*
$j('.tick, .untick').click(function(e) {
	e.preventDefault();
	var opt = $j(this).attr('class');
	
	if (opt == 'tick') {
		$j('#promo_djs_listing input[type="checkbox"]').each(function() { $j(this).attr('checked', 'checked'); });
	} else if (opt == 'untick') {
		$j('#promo_djs_listing input[type="checkbox"]').each(function() { $j(this).removeAttr('checked'); });
	}
});
*/