<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Checkbox Dropdown - Show Value</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f5f5f5;
padding: 40px;
}
.container {
width: 420px;
margin: auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.dropdown { position: relative; }
.dropdown-btn {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 6px;
background: #fff;
cursor: pointer;
text-align: left;
}
.dropdown-menu {
position: absolute;
top: 45px;
left: 0;
width: 100%;
background: #fff;
border-radius: 8px;
border: 1px solid #ddd;
box-shadow: 0 4px 12px rgba(0,0,0,.15);
padding: 12px;
display: none;
z-index: 10;
}
.dropdown-menu label {
display: flex;
align-items: center;
margin-bottom: 8px;
cursor: pointer;
}
.dropdown-menu input { margin-right: 8px; }
.disabled { color: #aaa; cursor: not-allowed; }
.selected-info {
font-size: 13px;
color: #666;
margin-bottom: 8px;
}
.tags { margin-top: 12px; }
.tag {
display: inline-block;
background: #ffe7d9;
color: #ff6a00;
padding: 4px 8px;
border-radius: 6px;
font-size: 13px;
margin-right: 6px;
margin-bottom: 6px;
}
</style>
</head>
<body>
<div class="container">
<h3>Business Type</h3>
<form method="POST" action="submit.php">
<!-- INPUT GỬI BACKEND -->
<input type="hidden" name="searchname" id="searchname">
<div class="dropdown">
<button type="button" class="dropdown-btn" id="dropdownBtn">
Chọn loại hình kinh doanh
</button>
<div class="dropdown-menu" id="dropdownMenu">
<div class="selected-info">
Selected: <span id="count">0</span>/3
</div>
<label><input type="checkbox" value="Import and Export">Import and Export</label>
<label><input type="checkbox" value="Retail & Agency">Retail & Agency</label>
<label><input type="checkbox" value="Manufacturer">Manufacturer</label>
<label><input type="checkbox" value="Wholesale">Wholesale</label>
<label><input type="checkbox" value="Service Provider">Service Provider</label>
</div>
</div>
<div class="tags" id="tags"></div>
<button style="margin-top:15px;width:100%">Submit</button>
</form>
</div>
<script>
const dropdownBtn = document.getElementById("dropdownBtn");
const dropdownMenu = document.getElementById("dropdownMenu");
const checkboxes = dropdownMenu.querySelectorAll("input[type=checkbox]");
const countEl = document.getElementById("count");
const tagsEl = document.getElementById("tags");
const hiddenInput = document.getElementById("searchname");
const MAX = 3;
const placeholder = "Chọn loại hình kinh doanh";
dropdownBtn.onclick = () => {
dropdownMenu.style.display =
dropdownMenu.style.display === "block" ? "none" : "block";
};
document.addEventListener("click", e => {
if (!e.target.closest(".dropdown")) {
dropdownMenu.style.display = "none";
}
});
checkboxes.forEach(cb => {
cb.addEventListener("change", () => {
const checked = [...checkboxes].filter(c => c.checked);
if (checked.length > MAX) {
cb.checked = false;
return;
}
updateUI();
});
});
function updateUI() {
const checked = [...checkboxes].filter(c => c.checked);
countEl.textContent = checked.length;
// Disable khi đủ 3
checkboxes.forEach(cb => {
const label = cb.parentElement;
if (!cb.checked && checked.length === MAX) {
cb.disabled = true;
label.classList.add("disabled");
} else {
cb.disabled = false;
label.classList.remove("disabled");
}
});
const values = checked.map(c => c.value);
// 👉 HIỆN TRONG BUTTON
dropdownBtn.textContent =
values.length ? values.join(", ") : placeholder;
// 👉 GỬI FORM
hiddenInput.value = values.join(",");
// // Tags
// tagsEl.innerHTML = values
// .map(v => `<span class="tag">${v}</span>`)
// .join("");
}
</script>
</body>
</html>
