JSFiddle - React, Tailwind, and code Playground
HTML
<div class="containerCombo">
<input type="text" class="resultat">
<input type="button" value="Afficher">
<ul class="containerElCombo">
<li class="elementCombo">
<input type="checkbox"><label >Lundi</label>
</li>
<li class="elementCombo">
<input type="checkbox"><label >Mardi</label>
</li>
<li class="elementCombo">
<input type="checkbox"><label >Mercredi</label>
</li>
<li class="elementCombo">
<input type="checkbox"><label >Jeudi</label>
</li>
<li class="elementCombo">
<input type="checkbox"><label >Vendredi</label>
</li>
<li class="elementCombo">
<input type="checkbox"><label >Samedi</label>
</li>
<li class="elementCombo">
<input type="checkbox"><label >Dimanche</label>
</li>
</ul>
</div>
<div class="containerCombo">
<input type="text" class="resultat">
<input type="button" value="Afficher">
<ul class="containerElCombo">
<li class="elementCombo">
<input type="checkbox"><label >01</label>
</li>
<li class="elementCombo">
<input type="checkbox"><label >02</label>
</li>
<li class="elementCombo">
<input type="checkbox"><label >03</label>
</li>
<li class="elementCombo">
<input type="checkbox"><label >04</label>
</li>
<li class="elementCombo">
<input type="checkbox"><label >05</label>
</li>
<li class="elementCombo">
<input type="checkbox"><label >06</label>
</li>
<li class="elementCombo">
<input type="checkbox"><label >07</label>
</li>
<li class="elementCombo">
<input type="checkbox"><label >08</label>
</li>
<li class="elementCombo">
<input type="checkbox"><label >09</label>
</li>
<li class="elementCombo">
<input type="checkbox"><label >10</label>
</li>
<li class="elementCombo">
<input type="checkbox"><label >11</label>
</li>
<li class="elementCombo">
<input type="checkbox"><label >12</label>
</li>
<li class="elementCombo">
<input type="checkbox"><label >13</label>
</li>
<li...
CSS
.elementCombo
{
background-color: white;
width: 200px;
list-style-type:none;
}
.containerElCombo
{
overflow: auto;
height:150px;
width: 250px;
margin-top : 24px;
}
JavaScript
$(function(){
//On cache les éléments dès le début
$(".containerElCombo").hide();
//On cache quand on perd le focus
$("input[type=button]").blur( function(){
$('.containerElCombo').hide();
});
//Afficher-Cacher
$("input[type=button]").on('click', function(){
$('.containerElCombo').not($(this).next()).hide();
$(this).next().toggle();
});
//Affiche les éléments coché dans l'input
$(":checkbox").on('click', function () {
sel = [];
$elt= $(this).closest('.containerElCombo');
$elt.find(':checkbox:checked').each(function () {
sel.push($(this).next('label').text());
});
$elt.prevAll('.resultat').val(sel.join('; '));
});
});