JSFiddle - React, Tailwind, and code Playground
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, '');
});
}
}
});