Cara Membuat Checkbox didalam Select Option

Checkbox adalah Tag input HTML yang diisi dengan cara checklist pada kotak pilihan biasannya bisa dipilih lebih dari satu. Tentu checkbox sendiri bisa berada didalam ataupun diluar tag form HTML .Dalam kasus kali ini saya akan membagikan tutorial tentang cara membuat checkbox didalam select option. Nah kenapa saya menambahkan select option, dalam select option hanya bisa dipilih satu nilai saja atau sesuai pilihan yang diinginkan.Supaya tidak penasaran tentang cara pembuatanya ayooo jangan kemana-mana, sahabat bisa ikutin langkah-langkah yang saya berikan seperti berikut ini:

Langkah pertama buka text editor masing-masing buat file HTML untuk menyimpan struktur HTMLnya ,ketikan code HTML dibawah ini:

<body>
	<div class="container">
	<h1>Membuat Checkbox didalam Select Option</h1>
		<div class="row" onclick="showCheckboxes()">
			<select>
				<option>~ .::. Select .::. ~</option>			
			</select>
			<div class="rows"></div>
		</div>
		<div id="box">
			<label for="box1"><input type="checkbox" id="bx1">Web Master</label>
			<label for="box2"><input type="checkbox" id="bx2">Web Design</label>	
			<label for="box3"><input type="checkbox" id="bx3">Web Programming</label>	
			<label for="box4"><input type="checkbox" id="bx4">Mobile Apps</label>			
		</div>
	</div>

code HTML diatas saya buat tag select option dan membuat tag input checkbox.

Langkah selanjutnya tambahkan style CSS agar terlihat rapih ketikan seperti berikut:

<style>
body{
	background: #ffbfab;
}
	.container{
		width:450px;
		margin:auto;
	}
	.row{
		position: relative;
	}
	.row select{
		width:100%;
		font-weight: bold;
		padding:7px;
		text-align: center;
	}
	.rows{
		position: absolute;
		left: 0;
		top:0;
		right: 0;
		bottom: 0;
	}
	#box{
		display: none;
		border:1px solid #60ff00;
	}
	#box label{
		display: block;
		padding: 10px 0;
	}
	#box label:hover{
		background-color: #03d3ff;
	}
</style>

Baiklah sekarang ketikkan sintax dari javascript dibawah ini :

<script>
		var expanded = false;
		function showCheckboxes() {
			var checkboxes = document.getElementById("box");
			if(!expanded) {
				checkboxes.style.display = "block";
				expanded = true;
			}else{
				checkboxes.style.display = "none";
				expanded = false;
			}
		}
	</script>

pada code HTML tadi saya sudah memberikan fungsi onclick,jadi saat tag select diclick maka input checkbox akan muncul. Jadi jika semua sudah di ketikkan jangan lupa save dan jalankan pada browser masing-masing lihat tampilannya akan seperti ini :

Demikian pembahasan kali ini tentang cara membuat checkbox didalam select option, selamat mencoba dan semoga bermanfaat sampai jumpa lagi dengan pembahasan artikel lainnya.

terima kasih