JSFiddle - React, Tailwind, and code Playground

by Hendra Nucleo

HTML

<div class="drop-column">
<label class="column-label"><input class="column-checkbox" type = "checkbox" rel = "All Column" name = "All Filter" />Filter (All Fields)</label>
						<label class="column-label"><input class="column-checkbox" type = "checkbox" rel = "Name" name="Name" />Name</label>
						<label class="column-label"><input class="column-checkbox" type = "checkbox" rel = "Department" name = "Department" />Department</label>
						<label class="column-label"><input class="column-checkbox" type = "checkbox" rel = "Manager" name = "Manager" />Manager</label>
</div>
<div class="filter-by-col-text"></div>

JavaScript

$('div.drop-column').delegate('.column-checkbox', 'click', function () {
	
    
$('.column-checkbox').removeAttr('checked');
    $(this).prop('checked','checked');
    var	$checked = $('.column-checkbox:checked');
		var rels;
		$checked.each(function () {
			rels=($(this).attr('name'));
		});
		$('.filter-by-col-text').html(rels);
	});