JSFiddle - React, Tailwind, and code Playground

by Aurelievans

HTML

<body>
		<div>
            here I expect the selected values
			 <p id="text"> </p>
		</div>
		<form name="myForm">
			<div class="multiselect">
				<div class="selectBox" onclick="showCheckboxes()">
					<select name="mySelect">
						<option>Select the artists</option>
					</select>
					<div class="overSelect"></div>
				</div>
				<div id="checkboxes">
					<label >
						<input type="checkbox" name="myCheck_all" value="checkAll"  onchange="checkAll()">checkAll</label>
					<label>
						<input type="checkbox" name="myCheck" value="Heino">Heino</label>
					<label>
						<input type="checkbox"  name="myCheck" value="Michael Jackson">Michael Jackson</label>
					<label>
						<input type="checkbox"  name="myCheck" value="Tom Wait">Tom Wait</label>
					<label>
						 <input type="checkbox" name="myCheck" value="Nina Hagen">Nina Hagen</label>
					<label>
						 <input type="checkbox" name="myCheck" value="Marianne Rosenberg">Marianne Rosenberg</label>
				</div>
			</div>
			<label><button type="button" id="checkb" onClick="speichern(); showCheckboxes()">Auslesen </button></label>
			<input type="reset" value="reset">
			<!-- reset form --      <input type="button" value="Reset Form" onClick="this.form.reset()"> -->
		</form>
		
	
	</body>

CSS

.multiselect {
			width: 250px;
		}

		.selectBox {
			position: relative;
		}

		.selectBox select {
			width: 100%;
			font-weight: bold;
			  <!-- background-color:blue; -->
		}

		.overSelect {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		}

		#checkboxes {
			display: none;
			border: 1px red solid;
		}

		#checkboxes label {
			display: block;
		}

		#checkboxes label:hover {
			background-color: blue;
		}
		
		#checkb:hover {
			background-color: green;
		}
		button:hover {
			background-color: gray;
			color:white;
		}

JavaScript

var expanded = false;
			function showCheckboxes() {
			  var checkboxes = document.getElementById("checkboxes");
			  if (!expanded) {
				checkboxes.style.display = "block";
				expanded = true;
			  } else {
				checkboxes.style.display = "none";
				expanded = false;
			  }
			}
		function speichern(){
			var checkboxes = document.querySelectorAll('input[name="myCheck"]');
			var num = checkboxes.length;
			
				var checkitem = "";
				document.getElementById('text').innerHTML = "";
				for (var i=0; i<num; i++) {
					if (checkboxes[i].checked ==true) {
						checkitem = checkboxes[i].value + " x";	
						var elementknoten = document.createElement("BUTTON"); 							// create button	
						var textknoten = document.createTextNode(checkitem); 							// createTextNode with the selected value
						elementknoten.appendChild(textknoten);											//attaching the select value in the button
						document.getElementById('text').appendChild(elementknoten);            			// attaching the button ikl. selected value in <p>
						
					}			
					
				}
			}	
	
		//function to Check All Checkboxes by select single check box
        function checkAll(){
			var allCheckboxes = document.forms[0].elements.length;
            for (var i=0; i<allCheckboxes; i++){
				var elementsname = document.forms[0].elements[i].name;
				if (elementsname!=undefined & elementsname.indexOf("myCheck")!=-1){
                    document.forms[0].elements[i].checked = document.myForm.myCheck_all.checked;
                }
            }
        }
		
	function uncheckSelectNode() {
		var elem = document.getElementById('text');
		elem.addEventListener('click', uncheck);
		}																						
		function uncheck(event){
			var element = event.target;
			var de = document.getElementById('text');
			if (de!=element){
				var uncheck=document.getElementsByTagName('input');
				for(var i=0; i<uncheck.length; i++){
					if(uncheck[i].type=='checkbox'){
					uncheck[i].checked=false;
			}            ...