JSFiddle - React, Tailwind, and code Playground

by Norlihazmey Ghazali

HTML

<label for="Checkbox_1">Checkbox 1<input type="checkbox" name="" id="Checkbox_1" /></label> <br/>
<label for="Checkbox_2">Checkbox 2<input type="checkbox" name="" id="Checkbox_2" /></label> <br/>
<label for="Checkbox_3">Checkbox 3<input type="checkbox" name="" id="Checkbox_3" /></label> <br/>
<label for="Checkbox_4">Checkbox 4<input type="checkbox" name="" id="Checkbox_4" /></label> <br/>
<label for="Checkbox_5">Checkbox 5<input type="checkbox" name="" id="Checkbox_5" /></label> <br/>
<label for="Checkbox_6">Checkbox 6<input type="checkbox" name="" id="Checkbox_6" /></label>
<br/><br/>
your combo Here: <br/>
<p class="combo"></p>

CSS

input[type="checkbox"]{
  width:30px;
  height:30px;
  display:none;
}
label{
  cursor:pointer;
  margin-bottom:10px;
  padding:10px 20px;
  border:1px solid #000;
  background:#ccc;
  display:inline-block;
}
label.active{
  background:yellow;
}

JavaScript

var checked = [];
			$('input[type="checkbox"]').change(function(e) {
        $(".combo").empty();
				var num_checked = $('input[type="checkbox"]:checked').length;
				
				if (num_checked > 3) {
					checked[checked.length - 1].prop('checked', false);
					if(checked[checked.length - 1].prop('checked', false)){
						checked[checked.length - 1].parents('label').removeClass("active");
						var et = checked[checked.length - 1].parents('label').text();
						$('.combo').text(function () {
							return $(this).text().replace(et, '');  
						});
						
					}
					checked.pop();
				}
				if($.inArray($(this), checked) < 0){
					checked.push($(this));
					if($(this).is(':checked')){
						$(this).parents('label').addClass("active");
						var txt = $(this).parents('label');
            //console.log(t)
						$(".combo").append( $(checked).map(function(i,e) {
            	console.log($(e).closest('label').text())
							return $(e).closest('label').text();
						}).get().join(','));

					} else{
						$(this).parents('label').removeClass("active-cb");
						//$('.selectedSwitch').text('');
						var qr = $(this).parents('label').text();
						$('.combo').text(function () {
							return $(this).text().replace(qr, '');  
						});
					}
				}
			});