JSFiddle - React, Tailwind, and code Playground

by TCHdevlp

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div id="ms_wrapper">
  <div style="padding-bottom:10px;">
    <input type="button" id="ms_button" value="Choix des libellés de facturation"/>
  </div>
  <div id="ms_content" style="display:none;">
    <ul id="liste_libelle_fact">
      <li>
        <span class="ms_span"><input type="checkbox" id="chkbx1">Mon premier libellé</span>
      </li>
      <li>
        <span class="ms_span"><input type="checkbox" id="chkbx2">Mon deuxième libellé</span>
      </li>
      <li>
        <span class="ms_span"><input type="checkbox" id="chkbx3">Mon troisiéme libellé</span>
      </li>
      <li>
        <span class="ms_span"><input type="checkbox" id="chkbx4">Mon quatrième libellé</span>
      </li>
    </ul>
  </div>
</div>

CSS

#ms_content{
  border:2px solid grey;
  border-radius:10px;
  background-color:white;
  display:inline-block;
  margin:auto;
  padding:10px;
  max-height:400px;
  max-width:600px;
}

#liste_libelle_fact{
   list-style-type: none;
   padding:0;
}

JavaScript

//Affiche le selector si on clique sur le bouton
$("#ms_button").on("click", function(event){
	event.stopPropagation();
	$('#ms_content').show();
});

//masque le selector si on clique qq part
$('html').on("click", function() {
  $('#ms_content').hide();
});

//ne masque pas le selector si on clique dedans
$('#ms_content').on("click", function(event){
    event.stopPropagation();
});

//le clic sur un texte toggle la checkbox correspondante
$('.ms_span').on("click", function(){
	var checkBoxes = $(this).find("> input:checkbox");
	checkBoxes.prop("checked", !checkBoxes.prop("checked"));
});