Develop Reference

Use only one checkbox from two

I have a form that has two checkboxes, now you can click the checkbox on both
The question is, is it possible to make it so that there is only one choice? For example, clicked on the first one, it turned on, clicked on the second one, the first turned off, the second turned on. It should also be possible to uncheck the box at any time. I know that I can use the radio type, but I need only checkboxes
.call-form-item {
padding-bottom: 12px;
margin-bottom: 24px;
margin-left: 50px;
margin-right: 50px;
}
input {
margin: 0;
box-sizing: border-box;
outline: none;
border: none;
background-color: #EEF0F7;
margin-right: 10px;
}
.input-wrapper {
display: flex;
align-items: flex-start;
}
label {
color: #808694;
font-family: Montserrat;
font-size: 10px;
font-weight: bold;
letter-spacing: 0;
line-height: 16px;
text-transform: uppercase;
margin-right: 10px;
}
input[type=checkbox]:focus {
outline: rgba(0, 0, 0, 0.2);
}
input[type=checkbox] {
background-color: #EEF0F7;
border-radius: 2px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 17px;
height: 17px;
cursor: pointer;
position: relative;
}
input[type=checkbox]:checked {
background-color: #808694;
background: #808694 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contacts-call-form">
<form class="js-form" action="{{ route('send-contacts-call') }}">
<div class="col-md-6">
<div class="call-form-item">
<label for="name">Name *</label>
<div class="input-wrapper">
<input class="js-form-call-name" id="name" type="text" name="name">
</div>
</div>
</div>
<div class="col-md-6">
<div class="call-form-item">
<label for="email">Email *</label>
<div class="input-wrapper">
<input class="js-form-call-email" id="email" type="email" name="email">
</div>
</div>
</div>
<div class="col-md-6">
<div class="call-form-item">
<div class="input-wrapper">
<input class="js-form-call-check1" id="check1" name="check1" type="checkbox"><label>Check 1</label>
<input class="js-form-call-check2" id="check2" name="check2" type="checkbox"><label>Check 2</label>
</div>
</div>
</div>
</form>
</div>

The script would loo something like this. I didn't test this so there might be misspellings causing errors and such.
// get first checkbox element
let box1 = document.getElementByID( "check1" );
// get second checkbox element
let box2 = document.getElementByID( "check2" );
// add events that fires when boxes are checked
box1.addEventListener( "change", function() {
// see if the other box is already checked
if ( box2.checked ) {
// if so, uncheck it
box2.checked = false;
}
});
box2.addEventListener( "change", function() {
if ( box1.checked ) {
box1.checked = false;
}
});
But you can also just use radio buttons and invoke a hidden reset button when you click a checked radio button I think.

Here is another version that will work with any number of checkboxes.
const inps=document.querySelectorAll(".input-wrapper input");
inps.forEach(e=>e.addEventListener("click",ev=>{
inps.forEach(c=>{if(c!==e) c.checked=false})
}))
.call-form-item {
padding-bottom: 12px;
margin-bottom: 24px;
margin-left: 50px;
margin-right: 50px;
}
input {
margin: 0;
box-sizing: border-box;
outline: none;
border: none;
background-color: #EEF0F7;
margin-right: 10px;
}
.input-wrapper {
display: flex;
align-items: flex-start;
}
label {
color: #808694;
font-family: Montserrat;
font-size: 10px;
font-weight: bold;
letter-spacing: 0;
line-height: 16px;
text-transform: uppercase;
margin-right: 10px;
}
input[type=checkbox]:focus {
outline: rgba(0, 0, 0, 0.2);
}
input[type=checkbox] {
background-color: #EEF0F7;
border-radius: 2px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 17px;
height: 17px;
cursor: pointer;
position: relative;
}
input[type=checkbox]:checked {
background-color: #808694;
background: #808694 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
}
<div class="contacts-call-form">
<form class="js-form" action="{{ route('send-contacts-call') }}">
<div class="col-md-6">
<div class="call-form-item">
<label for="name">Name *</label>
<div class="input-wrapper">
<input class="js-form-call-name" id="name" type="text" name="name">
</div>
</div>
</div>
<div class="col-md-6">
<div class="call-form-item">
<label for="email">Email *</label>
<div class="input-wrapper">
<input class="js-form-call-email" id="email" type="email" name="email">
</div>
</div>
</div>
<div class="col-md-6">
<div class="call-form-item">
<div class="input-wrapper">
<input class="js-form-call-check1" id="check1" name="check1" type="checkbox"><label>Check 1</label>
<input class="js-form-call-check2" id="check2" name="check2" type="checkbox"><label>Check 2</label>
</div>
</div>
</div>
</form>
</div>
And here is an alternative, using radio buttons:
const inps=document.querySelectorAll(".input-wrapper input");
inps.forEach(e=>e.addEventListener("click",ev=>{
e.checked=e!==inps.last;
inps.last=e.checked?e:null
}))
<div class="input-wrapper">
<label><input name="radio" value="1" type="radio">Check 1</label>
<label><input name="radio" value="2" type="radio">Check 2</label>
<label><input name="radio" value="3" type="radio">Check 3</label>
</div>

Alternate solution:
HTML:
<section>
<label><input type="checkbox" value="CBox 1"> CBox 1</label>
<label><input type="checkbox" value="CBox 2"> CBox 2</label>
<label><input type="checkbox" value="CBox 3"> CBox 3</label>
<label><input type="checkbox" value="CBox 4"> CBox 4</label>
<label><input type="checkbox" value="CBox 5"> CBox 5</label>
</section>
<p> Checkbox acts like a radio button, but can be reset </p>
Javascript:
const sel = document.querySelectorAll('section input[type="checkbox"]');
for (el of sel) {
el.addEventListener('click',
function(e) { sel.forEach( (x) => { if (e.currentTarget != x) x.checked = false; } ); }
);
};

You can use JavaScript / jQuery for it. If check1 is active, just disable check2.
See change event and disabled

How to select checkboxes from the dropdown? [duplicate]

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;
}
}
.gradesub-filter{
width: 299px;
height: 335px;
margin: 30px 0px 0px 0px;
background-color: #ffffff;
}
.form-filter-shade{
padding: 16px 0px 9px 20px;
font-weight: 600;
font-size: 16px;
border-bottom: 2px solid #F0F0F0;
}
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
<div class="gradesub-filter">
<div class="form-filter-shade">Gradecheck</div>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" />First checkbox</label>
<label for="two">
<input type="checkbox" id="two" />Second checkbox</label>
<label for="three">
<input type="checkbox" id="three" />Third checkbox</label>
</div>
</div>
</div>
I am trying to do "Drop-down with multi select" with checkboxes as shown in the picture below. Now the issue with the code is unable to select the list from the dropdown.
I am thinking that the issue is in js code, where it is not fetching values during onclick, Can any one please suggest me to solve the issue

I think you are looking for nested Checkbox, Provided Image also suggest the same.
Here is the code snippet, simply added <ul> and <li> tags for checkboxes alignment and used some JavaScript query selectors for checkbox functioning.
var subOptions = document.querySelectorAll('input.sub');
var checkAll = document.getElementById("one");
for(var i = 0; i < subOptions.length; i++ ){
subOptions[i].onclick = function(){
var checkedCount = document.querySelectorAll('input.sub:checked').length;
checkAll.checked = checkedCount > 0;
checkAll.indeterminate = checkedCount > 0 && checkedCount < subOptions.length;
}
}
checkAll.onclick = function() {
for(var i=0; i<subOptions.length; i++) {
subOptions[i].checked = this.checked;
}
}
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;
}
}
.gradesub-filter{
width: 299px;
height: 335px;
margin: 30px 0px 0px 0px;
background-color: #ffffff;
}
.form-filter-shade{
padding: 16px 0px 9px 20px;
font-weight: 600;
font-size: 16px;
border-bottom: 2px solid #F0F0F0;
}
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
ul{
margin-left: -25px;
}
li{
list-style: none;
}
<div class="gradesub-filter">
<div class="form-filter-shade">Gradecheck</div>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<ul>
<li>
<label for="one"><input type="checkbox" id="one" />First checkbox</label>
<ul>
<li>
<label for="sub-one"><input class='sub' type="checkbox" id="sub-one" />Sub One checkbox</label>
</li>
<li>
<label for="sub-two"><input class='sub' type="checkbox" id="sub-two" />Sub Two checkbox</label>
</li>
<li>
<label for="sub-three"><input class='sub' type="checkbox" id="sub-three" />Sub Three checkbox</label>
</li>
</ul>
</li>
<li>
<label for="two"><input type="checkbox" id="two" />Second checkbox</label>
</li>
<li>
<label for="three"><input type="checkbox" id="three" />Third checkbox</label>
</li>
</ul>
</div>
</div>
</div>
Since you clearly not mentioned in the question, I thought it would be you looking for. If any help needed, Mention in the comment.

Error when trying to work on drop down with multi select?

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;
}
}
.gradesub-filter{
width: 299px;
height: 335px;
margin: 30px 0px 0px 0px;
background-color: #ffffff;
}
.form-filter-shade{
padding: 16px 0px 9px 20px;
font-weight: 600;
font-size: 16px;
border-bottom: 2px solid #F0F0F0;
}
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
<div class="gradesub-filter">
<div class="form-filter-shade">Gradecheck</div>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" />First checkbox</label>
<label for="two">
<input type="checkbox" id="two" />Second checkbox</label>
<label for="three">
<input type="checkbox" id="three" />Third checkbox</label>
</div>
</div>
</div>
I am trying to do "Drop-down with multi select" with checkboxes as shown in the picture below. Now the issue with the code is unable to select the list from the dropdown.
I am thinking that the issue is in js code, where it is not fetching values during onclick, Can any one please suggest me to solve the issue

I think you are looking for nested Checkbox, Provided Image also suggest the same.
Here is the code snippet, simply added <ul> and <li> tags for checkboxes alignment and used some JavaScript query selectors for checkbox functioning.
var subOptions = document.querySelectorAll('input.sub');
var checkAll = document.getElementById("one");
for(var i = 0; i < subOptions.length; i++ ){
subOptions[i].onclick = function(){
var checkedCount = document.querySelectorAll('input.sub:checked').length;
checkAll.checked = checkedCount > 0;
checkAll.indeterminate = checkedCount > 0 && checkedCount < subOptions.length;
}
}
checkAll.onclick = function() {
for(var i=0; i<subOptions.length; i++) {
subOptions[i].checked = this.checked;
}
}
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;
}
}
.gradesub-filter{
width: 299px;
height: 335px;
margin: 30px 0px 0px 0px;
background-color: #ffffff;
}
.form-filter-shade{
padding: 16px 0px 9px 20px;
font-weight: 600;
font-size: 16px;
border-bottom: 2px solid #F0F0F0;
}
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
ul{
margin-left: -25px;
}
li{
list-style: none;
}
<div class="gradesub-filter">
<div class="form-filter-shade">Gradecheck</div>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<ul>
<li>
<label for="one"><input type="checkbox" id="one" />First checkbox</label>
<ul>
<li>
<label for="sub-one"><input class='sub' type="checkbox" id="sub-one" />Sub One checkbox</label>
</li>
<li>
<label for="sub-two"><input class='sub' type="checkbox" id="sub-two" />Sub Two checkbox</label>
</li>
<li>
<label for="sub-three"><input class='sub' type="checkbox" id="sub-three" />Sub Three checkbox</label>
</li>
</ul>
</li>
<li>
<label for="two"><input type="checkbox" id="two" />Second checkbox</label>
</li>
<li>
<label for="three"><input type="checkbox" id="three" />Third checkbox</label>
</li>
</ul>
</div>
</div>
</div>
Since you clearly not mentioned in the question, I thought it would be you looking for. If any help needed, Mention in the comment.

CSS missbehavior? on :hover using ~

I have created a custom drop-down list and when I hover over the p tag(header) and the first label(option) I get expected behavior, but when I try to move my cursor to the next label the entire section closes; why is the hover not maintained? (If I move my mouse very slowly px by px I get the expected behavior)
Javascript, CSS & HTML
const ddlContainers = document.getElementsByClassName('ddlContainer');
for (let ddlContainer of ddlContainers) {
const ddlButton = ddlContainer.children[1];//ddlContainer.getElementsByTagName('button')[0];
//const ddlSelect = ddlContainer.children[2]; //ddlContainer.getElementsByTagName('div')[0];
const ddlOptions = ddlContainer.children[2].getElementsByTagName('label'); //ddlSelect.getElementsByTagName('label'); // document.querySelectorAll("#test > label");
const selectLabel = ddlButton.children[0];
ddlButton.addEventListener('click', function (e) {
e.preventDefault();
e.target.nextElementSibling.classList.toggle('ddlHidden');
})
function toggleHidden(e) {
e.target.parentNode.classList.toggle('ddlHidden');
}
for (let option of ddlOptions) {
option.addEventListener('click', function (e) {
setSelectTitle(e);
})
}
function setSelectTitle(e) {
selectLabel.innerText = e.target.innerText
toggleHidden(e);
}
}
.ddlContainer {
position: relative;
width: 100%;
font-size: 1em;
}
.ddlButton {
display: flex;
justify-content: space-between;
padding: 0.3em 0.6em 0.3em 0.8em;
width: 100%;
background: #fff;
}
.arrow {
border: solid black;
font-size: 0.9em;
border-width: 0 2px 2px 0;
padding: 0.2em;
margin: 0 0.2em;
height: 0;
width: 0;
align-self: center;
transform: rotate(45deg)
}
.ddl {
position: absolute;
z-index: 1;
display: flex;
width: 100%;
flex-direction: column;
border: 2px solid #00000088;
background: #eee;
}
.ddl input[type="radio"] {
display: none;
}
.ddl > * {
display: flex;
justify-content: space-between;
margin: 0;
padding: 0.4em 1em;
z-index: 2;
}
.ddl > label{
font-size: 0.9em;
background: #fff;
cursor: pointer;
/*Hides the label*/
height: 0;
padding: 0;
visibility: hidden;
transition: color 0.1s ease, padding ease 0.1s;
color: #ffffffff;
}
.ddl > p:hover ~ label { /* Displays all labels */
height: auto;
padding: 0.5em 1.5em;
color: #000000;
visibility: visible;
}
.ddl > p:hover ~ p ~ label { /* Removes the display for all the following sets of labels */
height: 0;
padding: 0;
color: #ffffffff;
visibility: hidden;
}
.ddl > label:hover ~ label { /* Kepps display for all following labels */
height: auto;
padding: 0.5em 1.5em;
color: #000000;
visibility: visible;
}
.ddl > label:hover ~ p ~ label { /* Removes display for all the following sets of labels */
height: 0;
padding: 0;
color: #ffffffff;
visibility: hidden;
}
.ddl > label:hover { /* Keeps display of current label when leaving p-tag */
height: auto;
padding: 0.5em 1.5em;
color: #000000;
visibility: visible;
}
.ddl > label:hover{
background: #d3d9f0;
}
.ddlHidden {
display: none;
}
<div id="test1" class="ddlContainer form-group">
<label for="test1Btn">Option list 1:</label>
<button id="test1Btn" class="ddlButton">
<span>- Chose Option -</span>
<span class="arrow"></span>
</button>
<div class="ddl ddlHidden">
<p>Item type 1<span class="arrow"></span></p>
<label for="test1-0">Item 1.1</label>
<input id="test1-0" value="42" type="radio" name="testOvelse1opt" />
<label for="test1-1">Item 1.2</label>
<input id="test1-1" value="16" type="radio" name="testOvelse1opt" />
<label for="test1-2">Item 1.3</label>
<input id="test1-2" value="17" type="radio" name="testOvelse1opt" />
<label for="test1-3">Item 1.3</label>
<input id="test1-3" value="2" type="radio" name="testOvelse1opt" />
<p>Item type 2<span class="arrow"></span></p>
<label for="test1-4">Item 2.1</label>
<input id="test1-4" value="42" type="radio" name="testOvelse1opt" />
<label for="test1-5">Item 2.2</label>
<input id="test1-5" value="16" type="radio" name="testOvelse1opt" />
<p>Item type 3<span class="arrow"></span></p>
<label for="test1-6">Item 3.1</label>
<input id="test1-6" value="42" type="radio" name="testOvelse1opt" />
<label for="test1-7">Item 3.2</label>
<input id="test1-7" value="16" type="radio" name="testOvelse1opt" />
<label for="test1-8">Item 3.3</label>
<input id="test1-8" value="17" type="radio" name="testOvelse1opt" />
</div>
</div>
<br />
<div id="test2" class="ddlContainer form-group">
<label for="test2Btn2">Option list 2:</label>
<button id="test2Btn2" class="ddlButton">
<span>- Chose Option -</span>
<span class="arrow"></span>
</button>
<div class="ddl ddlHidden">
<p>Item type 1<span class="arrow"></span></p>
<label for="test2-0">Item 1.1</label>
<input id="test2-0" value="42" type="radio" name="testOvelse1opt" />
<label for="test2-1">Item 1.2</label>
<input id="test2-1" value="16" type="radio" name="testOvelse1opt" />
<label for="test2-2">Item 1.3</label>
<input id="test2-2" value="17" type="radio" name="testOvelse1opt" />
<label for="test2-3">Item 1.3</label>
<input id="test2-3" value="2" type="radio" name="testOvelse1opt" />
<p>Item type 2<span class="arrow"></span></p>
<label for="test2-4">Item 2.1</label>
<input id="test2-4" value="42" type="radio" name="testOvelse1opt" />
<label for="test2-5">Item 2.2</label>
<input id="test2-5" value="16" type="radio" name="testOvelse1opt" />
<p>Item type 3<span class="arrow"></span></p>
<label for="test2-6">Item 3.1</label>
<input id="test2-6" value="42" type="radio" name="testOvelse1opt" />
<label for="test2-7">Item 3.2</label>
<input id="test2-7" value="16" type="radio" name="testOvelse1opt" />
<label for="test2-8">Item 3.3</label>
<input id="test2-8" value="17" type="radio" name="testOvelse1opt" />
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
NOTE: As I am generating the HTML with RazorEngine changing the HTML layout would be difficult.

How to create checkbox inside dropdown?

I want to create a multiple selection dropbox list. Actually I have to select more than one option using a dropdown menu. When I simply do this as shown bellow:
<select>
<option><input type="checkbox"></option>
</select>
Then checkbox is showing in front of dropdown field. But I want to create it for each option not for as a whole so that I can select more than option. Is there any way to do this?

Here is a simple dropdown checklist:
var checkList = document.getElementById('list1');
checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
if (checkList.classList.contains('visible'))
checkList.classList.remove('visible');
else
checkList.classList.add('visible');
}
.dropdown-check-list {
display: inline-block;
}
.dropdown-check-list .anchor {
position: relative;
cursor: pointer;
display: inline-block;
padding: 5px 50px 5px 10px;
border: 1px solid #ccc;
}
.dropdown-check-list .anchor:after {
position: absolute;
content: "";
border-left: 2px solid black;
border-top: 2px solid black;
padding: 5px;
right: 10px;
top: 20%;
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.dropdown-check-list .anchor:active:after {
right: 8px;
top: 21%;
}
.dropdown-check-list ul.items {
padding: 2px;
display: none;
margin: 0;
border: 1px solid #ccc;
border-top: none;
}
.dropdown-check-list ul.items li {
list-style: none;
}
.dropdown-check-list.visible .anchor {
color: #0094ff;
}
.dropdown-check-list.visible .items {
display: block;
}
<div id="list1" class="dropdown-check-list" tabindex="100">
<span class="anchor">Select Fruits</span>
<ul class="items">
<li><input type="checkbox" />Apple </li>
<li><input type="checkbox" />Orange</li>
<li><input type="checkbox" />Grapes </li>
<li><input type="checkbox" />Berry </li>
<li><input type="checkbox" />Mango </li>
<li><input type="checkbox" />Banana </li>
<li><input type="checkbox" />Tomato</li>
</ul>
</div>

This can't be done in just HTML (with form elements into option elements).
Or you can just use a standard select multiple field.
<select multiple>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>

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;
}
}
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" />First checkbox</label>
<label for="two">
<input type="checkbox" id="two" />Second checkbox</label>
<label for="three">
<input type="checkbox" id="three" />Third checkbox</label>
</div>
</div>
</form>

I have to say in advance that I was greatly inspired by the answer of Naveen so I created my own solution based on the answer.
Following 3 functions are the basis of our multiselect:
initiazation function - detects when user clicks away in order to close the dropdown
function that detects when user clicks on dropdown to uncollapse it
function that detects checkbox click events to update the label
few improvements include:
design as in bootstrap 5
collapse when clicking away
updating the label with list of values
added Y-axis overflow with scrollbar
also I tried to stick to native JS (no jQuery) and to use as much of a native Bootstrap 5 styling as possible
here is the video:
I had no intentions to make a ready to use solution that would suit every persons' needs so please adjust it to your liking. I am personally looking forward to adding a search feature.
fiddle:
window.onload = (event) => {
initMultiselect();
};
function initMultiselect() {
checkboxStatusChange();
document.addEventListener("click", function(evt) {
var flyoutElement = document.getElementById('myMultiselect'),
targetElement = evt.target; // clicked element
do {
if (targetElement == flyoutElement) {
// This is a click inside. Do nothing, just return.
//console.log('click inside');
return;
}
// Go up the DOM
targetElement = targetElement.parentNode;
} while (targetElement);
// This is a click outside.
toggleCheckboxArea(true);
//console.log('click outside');
});
}
function checkboxStatusChange() {
var multiselect = document.getElementById("mySelectLabel");
var multiselectOption = multiselect.getElementsByTagName('option')[0];
var values = [];
var checkboxes = document.getElementById("mySelectOptions");
var checkedCheckboxes = checkboxes.querySelectorAll('input[type=checkbox]:checked');
for (const item of checkedCheckboxes) {
var checkboxValue = item.getAttribute('value');
values.push(checkboxValue);
}
var dropdownValue = "Nothing is selected";
if (values.length > 0) {
dropdownValue = values.join(', ');
}
multiselectOption.innerText = dropdownValue;
}
function toggleCheckboxArea(onlyHide = false) {
var checkboxes = document.getElementById("mySelectOptions");
var displayValue = checkboxes.style.display;
if (displayValue != "block") {
if (onlyHide == false) {
checkboxes.style.display = "block";
}
} else {
checkboxes.style.display = "none";
}
}
.multiselect {
width: 100%;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#mySelectOptions {
display: none;
border: 0.5px #7c7c7c solid;
background-color: #ffffff;
max-height: 150px;
overflow-y: scroll;
}
#mySelectOptions label {
display: block;
font-weight: normal;
display: block;
white-space: nowrap;
min-height: 1.2em;
background-color: #ffffff00;
padding: 0 2.25rem 0 .75rem;
/* padding: .375rem 2.25rem .375rem .75rem; */
}
#mySelectOptions label:hover {
background-color: #1e90ff;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="form-group col-sm-8">
<label for="dur">BS original select</label>
<select id="dur" class="form-select">
<option value="12" selected>One Year</option>
<option value="24">Two Year</option>
<option value="36">Three Year</option>
<option value="48">Four year</option>
<option value="60">Five Year</option>
</select>
</div>
<div class="form-group col-sm-8">
<label for="myMultiselect">BS custom multiselect</label>
<div id="myMultiselect" class="multiselect">
<div id="mySelectLabel" class="selectBox" onclick="toggleCheckboxArea()">
<select class="form-select">
<option>somevalue</option>
</select>
<div class="overSelect"></div>
</div>
<div id="mySelectOptions">
<label for="one"><input type="checkbox" id="one" onchange="checkboxStatusChange()" value="one" /> First checkbox</label>
<label for="two"><input type="checkbox" id="two" onchange="checkboxStatusChange()" value="two" /> Second checkbox</label>
<label for="three"><input type="checkbox" id="three" onchange="checkboxStatusChange()" value="three" /> Third checkbox</label>
<label for="four"><input type="checkbox" id="four" onchange="checkboxStatusChange()" value="four" /> Third checkbox</label>
<label for="five"><input type="checkbox" id="five" onchange="checkboxStatusChange()" value="five" /> First checkbox</label>
<label for="six"><input type="checkbox" id="six" onchange="checkboxStatusChange()" value="six" /> Second checkbox</label>
<label for="seven"><input type="checkbox" id="seven" onchange="checkboxStatusChange()" value="seven" /> Third checkbox</label>
<label for="eight"><input type="checkbox" id="eight" onchange="checkboxStatusChange()" value="eight" /> First checkbox</label>
<label for="nine"><input type="checkbox" id="nine" onchange="checkboxStatusChange()" value="nine" /> Second checkbox</label>
<label for="ten"><input type="checkbox" id="ten" onchange="checkboxStatusChange()" value="ten" /> Third checkbox</label>
</div>
</div>
</div>
</div>

You can always use multiple or multiple = "true" option with a select tag, but there is one jquery plugin which makes it more beautiful. It is called chosen and can be found here.
This fiddle-example might help you to get started
Thank you.

Very simple code with Bootstrap and JQuery without any additional javascript code :
HTML :
.dropdown-menu label {
display: block;
}
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<form class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<label class="dropdown-item"><input type="checkbox" name="" value="one">First checkbox</label>
<label class="dropdown-item"><input type="checkbox" name="" value="two">Second checkbox</label>
<label class="dropdown-item"><input type="checkbox" name="" value="three">Third checkbox</label>
</form>
</div>
https://codepen.io/funkycram/pen/joVYBv

Multiple drop downs with checkbox's and jQuery.
jQuery(function($) {
var checkList = $('.dropdown-check-list');
checkList.on('click', 'span.anchor', function(event) {
var element = $(this).parent();
if (element.hasClass('visible')) {
element.removeClass('visible');
} else {
element.addClass('visible');
}
});
});
.dropdown-check-list {
display: inline-block;
width: 100%;
}
.dropdown-check-list:focus {
outline: 0;
}
.dropdown-check-list .anchor {
width: 98%;
position: relative;
cursor: pointer;
display: inline-block;
padding-top: 5px;
padding-left: 5px;
padding-bottom: 5px;
border: 1px #ccc solid;
}
.dropdown-check-list .anchor:after {
position: absolute;
content: "";
border-left: 2px solid black;
border-top: 2px solid black;
padding: 5px;
right: 10px;
top: 20%;
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.dropdown-check-list .anchor:active:after {
right: 8px;
top: 21%;
}
.dropdown-check-list ul.items {
padding: 2px;
display: none;
margin: 0;
border: 1px solid #ccc;
border-top: none;
}
.dropdown-check-list ul.items li {
list-style: none;
}
.dropdown-check-list.visible .anchor {
color: #0094ff;
}
.dropdown-check-list.visible .items {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list3" class="dropdown-check-list" tabindex="100">
<span class="anchor">Which development(s) are you interested in?</span>
<ul class="items">
<li><input id="answers_2529_the-lawns" name="answers[2529][answers][]" type="checkbox" value="The Lawns" /><label for="answers_2529_the-lawns">The Lawns</label></li>
<li><input id="answers_2529_the-residence" name="answers[2529][answers][]" type="checkbox" value="The Residence" /><label for="answers_2529_the-residence">The Residence</label></li>
</ul>
</div>

Simply use bootstrap-multiselect where you can populate dropdown with multiselect option and many more feaatures.
For doc and tutorials you may visit below link
https://www.npmjs.com/package/bootstrap-multiselect
http://davidstutz.de/bootstrap-multiselect/