We Keep Coding

How to create checkbox inside the form group selection HTML Javascript?

Currently, I have 200+ countries list in my database. I want to create a checkbox for the countries selection. Even I already put the html type as a checkbox, the checkbox still doesn't exist in my selection form. How to create checkbox actually?
HTML :
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Country</label>
<select class="form-control" name="country_id[]" multiple size="10" style="height: 100%;">
#foreach ($countries as $item)
<option value="{{$item->id}}" selected>{{$item->name}}</option>
#endforeach
</select>
</div>
</div>
</div>

You cannot place checkbox inside select element but you can get the same functionality by using HTML, CSS and 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;
}
}
.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>
Also you can use Bootstrap Multiselect plugin.

Javascript - Radio buttons with switch case

I am trying to change the div's background colour using inputs from the radio buttons but I struggle to change colours in reverse order e.g. (pink to black ) or (green to yellow). It works perfectly fine when I try to change colour in order e.g. (black to red) or (red to yellow). I have used console.log to check the variable when I click on a different radio button and it is changing accordingly.
Many thanks
const container = document.querySelector(".container");
const cell = document.querySelector(".cell");
// var rows = 16; //default grid = 16x16
// var cols = 16;
var rows = 16;
var cols = 16;
function makeGrid(rows, cols) {
container.style.setProperty("--rows", rows);
container.style.setProperty("--cols", cols);
for (i = 0; i < (rows * cols); i++) {
let cell = document.createElement("div");
container.appendChild(cell).className = "cell";
container.appendChild(cell).id = i + 1;
};
};
function modifyCell() {
$(document).ready(function() {
var radioValue = $('input[type=radio]:checked').val();
switch (radioValue) {
case 'black':
// console.log(radioValue);
$(".cell").on("mousedown", function() {
$(this).removeClass('cell').addClass('cell-black');
})
.on("mouseup", function() {
$(this).removeClass('cell').addClass('cell-black');
});
break;
case 'red':
console.log(radioValue);
$(".cell").on("mousedown", function() {
$(this).removeClass('cell').addClass('cell-red');
})
.on("mouseup", function() {
$(this).removeClass('cell').addClass('cell-red');
});
break;
case 'pink':
console.log(radioValue);
$(".cell").on("mousedown", function() {
$(this).removeClass('cell').addClass('cell-pink');
})
.on("mouseup", function() {
$(this).removeClass('cell').addClass('cell-pink');
});
break;
case 'yellow':
console.log(radioValue);
$(".cell").on("mousedown", function() {
$(this).removeClass('cell').addClass('cell-yellow');
})
.on("mouseup", function() {
$(this).removeClass('cell').addClass('cell-yellow');
});
break;
case 'green':
console.log(radioValue);
$(".cell").on("mousedown", function() {
$(this).removeClass('cell').addClass('cell-green');
})
.on("mouseup", function() {
$(this).removeClass('cell').addClass('cell-green');
});
break;
case 'blue':
console.log(radioValue);
$(".cell").on("mousedown", function() {
$(this).removeClass('cell').addClass('cell-blue');
})
.on("mouseup", function() {
$(this).removeClass('cell').addClass('cell-blue');
});
break;
case 'violet':
console.log(radioValue);
$(".cell").on("mousedown", function() {
$(this).removeClass('cell').addClass('cell-violet');
})
.on("mouseup", function() {
$(this).removeClass('cell').addClass('cell-violet');
});
break;
default:
alert("!");
};
});
};
function reset() {
$(document).ready(function() {
while (container.firstChild) {
container.firstChild.remove();
};
makeGrid(rows, cols);
modifyCell();
});
};
function resetGrid() {
rows = prompt('Enter a number for grid size. (min = 1, max = 50)');
cols = rows;
$(document).ready(function() {
while (container.firstChild) {
container.firstChild.remove();
};
makeGrid(rows, cols);
modifyCell();
});
};
makeGrid(rows, cols);
modifyCell();
$('input[type=radio]').on('change', function() {
modifyCell();
});
html {
background-image: linear-gradient(45deg, purple, pink);
justify-items: center;
}
header {
margin-bottom: 10px;
padding: 3px;
text-align: center;
font-family: sans-serif;
font-size: 30px;
color: purple;
border: 5px thin purple;
border-radius: 10px;
width: 93vw;
background-color: white;
}
.container {
background-color: white;
display: grid;
margin: 2px;
border: 3px solid purple;
border-radius: 10px;
padding: 6px;
justify-content: center;
width: 90vw;
height: 90vw;
grid-template-rows: repeat(var(--rows), 1fr);
grid-template-columns: repeat(var(--cols), 1fr);
grid-gap: 1px;
}
.container .cell {
background-color: gray;
opacity: 0.3;
}
.container .cell:hover {
background-color: hsl(30, 0%, 95%);
opacity: 1;
}
.container .cell-black {
background-color: black;
opacity: 1;
}
.container .cell-red {
background-color: red;
opacity: 1;
}
.container .cell-pink {
background-color: pink;
opacity: 1;
}
.container .cell-yellow {
background-color: yellow;
opacity: 1;
}
.container .cell-green {
background-color: green;
opacity: 1;
}
.container .cell-blue {
background-color: blue;
opacity: 1;
}
.container .cell-violet {
background-color: violet;
opacity: 1;
}
.button {
border: 2px solid black;
border-radius: 20px;
font-size: 15px;
}
.button:hover {
border: 2px solid black;
border-radius: 20px;
font-size: 15px;
background-color: pink;
}
.radio {
border: 2px solid black;
border-radius: 10px;
box-sizing: border-box;
background-color: white;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Etch-a-Sketch</title>
</head>
<header>
Etch-a-Sketch
</header>
<body>
<input class="button" type="button" value="Reset Grid" onclick="resetGrid()">
<input class="button" type="button" value="Clear" onclick="reset()">
<div class="container">
</div>
<div class="radio">
<input type="radio" id="black" name="colour" value="black" checked>
<label for="black">Black</label>
<input type="radio" id="red" name="colour" value="red">
<label for="red">Red</label>
<input type="radio" id="pink" name="colour" value="pink">
<label for="pink">Pink</label>
<input type="radio" id="yellow" name="colour" value="yellow">
<label for="yellow">Yellow</label>
<input type="radio" id="green" name="colour" value="green">
<label for="green">Green</label>
<input type="radio" id="blue" name="colour" value="blue">
<label for="blue">Blue</label>
<input type="radio" id="violet" name="colour" value="violet">
<label for="violet">Violet</label>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

You need to remove all the other cell-<color> classes when adding the new color, not just the cell class.
You shouldn't add new event handlers every time the user selects a different radio button. Just have the event handler get the color from the selected radio button.
And instead of using switch/case, you can concatenate the button value to cell- to get the new class to add.
I'm not sure why you had both mousedown and mouseup handlers, since they both did the same thing. So I combined them into a single click handler.
const container = document.querySelector(".container");
const cell = document.querySelector(".cell");
// var rows = 16; //default grid = 16x16
// var cols = 16;
var rows = 16;
var cols = 16;
function makeGrid(rows, cols) {
container.style.setProperty("--rows", rows);
container.style.setProperty("--cols", cols);
for (i = 0; i < (rows * cols); i++) {
let cell = document.createElement("div");
container.appendChild(cell).className = "cell";
container.appendChild(cell).id = i + 1;
};
};
function modifyCell() {
$(document).ready(function() {
$(".cell").on("click", function() {
var radioValue = $('input[type=radio]:checked').val();
$(this).removeClass("cell cell-black cell-red cell-pink cell-yellow cell-green cell-blue cell-violet").addClass("cell-" + radioValue);
});
});
}
function reset() {
$(document).ready(function() {
while (container.firstChild) {
container.firstChild.remove();
};
makeGrid(rows, cols);
modifyCell();
});
};
function resetGrid() {
rows = prompt('Enter a number for grid size. (min = 1, max = 50)');
cols = rows;
$(document).ready(function() {
while (container.firstChild) {
container.firstChild.remove();
};
makeGrid(rows, cols);
modifyCell();
});
};
makeGrid(rows, cols);
modifyCell();
html {
background-image: linear-gradient(45deg, purple, pink);
justify-items: center;
}
header {
margin-bottom: 10px;
padding: 3px;
text-align: center;
font-family: sans-serif;
font-size: 30px;
color: purple;
border: 5px thin purple;
border-radius: 10px;
width: 93vw;
background-color: white;
}
.container {
background-color: white;
display: grid;
margin: 2px;
border: 3px solid purple;
border-radius: 10px;
padding: 6px;
justify-content: center;
width: 90vw;
height: 90vw;
grid-template-rows: repeat(var(--rows), 1fr);
grid-template-columns: repeat(var(--cols), 1fr);
grid-gap: 1px;
}
.container .cell {
background-color: gray;
opacity: 0.3;
}
.container .cell:hover {
background-color: hsl(30, 0%, 95%);
opacity: 1;
}
.container .cell-black {
background-color: black;
opacity: 1;
}
.container .cell-red {
background-color: red;
opacity: 1;
}
.container .cell-pink {
background-color: pink;
opacity: 1;
}
.container .cell-yellow {
background-color: yellow;
opacity: 1;
}
.container .cell-green {
background-color: green;
opacity: 1;
}
.container .cell-blue {
background-color: blue;
opacity: 1;
}
.container .cell-violet {
background-color: violet;
opacity: 1;
}
.button {
border: 2px solid black;
border-radius: 20px;
font-size: 15px;
}
.button:hover {
border: 2px solid black;
border-radius: 20px;
font-size: 15px;
background-color: pink;
}
.radio {
border: 2px solid black;
border-radius: 10px;
box-sizing: border-box;
background-color: white;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Etch-a-Sketch</title>
</head>
<header>
Etch-a-Sketch
</header>
<body>
<input class="button" type="button" value="Reset Grid" onclick="resetGrid()">
<input class="button" type="button" value="Clear" onclick="reset()">
<div class="container">
</div>
<div class="radio">
<input type="radio" id="black" name="colour" value="black" checked>
<label for="black">Black</label>
<input type="radio" id="red" name="colour" value="red">
<label for="red">Red</label>
<input type="radio" id="pink" name="colour" value="pink">
<label for="pink">Pink</label>
<input type="radio" id="yellow" name="colour" value="yellow">
<label for="yellow">Yellow</label>
<input type="radio" id="green" name="colour" value="green">
<label for="green">Green</label>
<input type="radio" id="blue" name="colour" value="blue">
<label for="blue">Blue</label>
<input type="radio" id="violet" name="colour" value="violet">
<label for="violet">Violet</label>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

How to change img content after selecting a drop-down

I would like to change the content of my image after selecting the drop-down list. But after choosing the active pseudo-class it's blinking all the time.
I've tried many pseudo-classes so far but none of them worked.
Could anyone tell me what I did wrong?
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;
}
}
Here is the live
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: 100px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#checkboxes {
display: none;
border: 1px gray solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: yellow;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
background-color: transparent;
width: 100px !important;
}
.select-container {
display: flex;
width: 100px;
background-color: gray;
}
.drop-arrow {
content: url("https://cdn3.iconfinder.com/data/icons/fatcow/32/cursor.png");
}
.selectBox:active .drop-arrow {
content: url("https://cdn0.iconfinder.com/data/icons/fatcow/32/change_password.png");
}
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<div class="select-container">
<select>
<option>Select an option</option>
</select>
<img class="drop-arrow" alt="">
</div>
<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">Three checkbox</label>
</div>
</div>

If I get the thing that you wanna do, I this case I dont would use pseudo elements, I rather use classes, and you can toggle that clase using jquery or javascript, you can create a class called "active" and then when you click in the drop down you can change the image (you need to use css and putting the desired image as a background property) It would work

friend the problem is with selectBox:active .drop-arrow it only works when clic is pressed for that you can do like the code bellow; and another problem I saw you must to add flex-grow, flex-shrink, flex-basis to childs of flex container in this case .select-container, This code can be inprove with jquery toogleclass() check it
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
$(".select-container div").removeClass("drop-arrow");
$(".select-container div").addClass("drop-arrow2");
expanded = true;
} else {
$(".select-container div").removeClass("drop-arrow2");
$(".select-container div").addClass("drop-arrow");
checkboxes.style.display = "none";
expanded = false;
}
}
.multiselect {
width: 140px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#checkboxes {
display: none;
border: 1px gray solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: yellow;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
background-color: transparent;
flex:1 0 auto;
}
.select-container {
display: flex;
background-color: gray;
width:auto;
}
.drop-arrow {
flex:1 0 auto;
display:block;
width: 50px;
height: 35px;
background-image:url("https://cdn3.iconfinder.com/data/icons/fatcow/32/cursor.png");
background-repeat: no-repeat;
}
.drop-arrow2 {
content: url("https://cdn0.iconfinder.com/data/icons/fatcow/32/change_password.png");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<div class="select-container">
<select>
<option>Select an option</option>
</select>
<div class="drop-arrow" alt=""></div>
</div>
<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">Three checkbox</label>
</div>
</div>
check my pen https://codepen.io/Qleoz12/pen/QzPQvp

Multiselect checkboxes value show on button vanilla js

I have created a multi-select ui component where i have to push selected values to an array and show the same in a button value. I am getting the selected values in alert box but not able to get it in button.
Please help me to show the selected items values as button value as soon as the checkbox clicked.
Snippet:
function getCheckedCheckboxesFor(checkboxName) {
var checkboxes = document.querySelectorAll('input[name="' + checkboxName + '"]:checked'),
values = [];
Array.prototype.forEach.call(checkboxes, function(el) {
values.push(el.value);
});
return values;
}
.check-multiple {
display: inline-block;
height: 60px;
overflow-y: scroll;
border: 1px solid gray;
}
.check-multiple input {
float: left;
}
.check-multiple label {
display: inline-block;
}
.check-multiple span {
display: inline-block;
width: 100%;
}
.check-multiple input:checked~span {
background: #03f;
color: white;
}
<div class="check-multiple">
<label for="veh"><input value="car" type="checkbox" name="veh"><span>car</span></label>
<label for="veh"><input value="scooter" type="checkbox" name="veh"><span>scooter</span></label>
<label for="veh"><input value="bus" type="checkbox" name="veh"><span>bus</span></label>
</div>
<input type="button" onclick="alert(getCheckedCheckboxesFor('veh'));" value="Get Values" />

After reading your comments,
here is probably what you want to achieve:
// Added this:
var checkboxes = document.querySelectorAll('input[type=checkbox]');
checkboxes.forEach(function(chkbx) {
chkbx.onchange = function() {
document.getElementById("button").value = getCheckedCheckboxesFor(chkbx.name);
}
})
// Simplified a little this:
function getCheckedCheckboxesFor(name) {
var checkeds = document.querySelectorAll('input[name="' + name + '"]:checked'),
values = [];
checkeds.forEach(function(chkd) {
values.push(chkd.value);
});
return values;
}
.check-multiple {
display: inline-block;
height: 60px;
overflow-y: scroll;
border: 1px solid gray;
}
.check-multiple input {
float: left;
}
.check-multiple label {
display: inline-block;
}
.check-multiple span {
display: inline-block;
width: 100%;
}
.check-multiple input:checked~span {
background: #03f;
color: white;
}
<div class="check-multiple">
<label for="veh"><input value="car" type="checkbox" name="veh"><span>car</span></label>
<label for="veh"><input value="scooter" type="checkbox" name="veh"><span>scooter</span></label>
<label for="veh"><input value="bus" type="checkbox" name="veh"><span>bus</span></label>
</div>
<input id="button" type="button" onclick="alert(getCheckedCheckboxesFor('veh'));" value="Get Values" />
⋅
⋅
⋅
Then, as you MUST want to use this code on multiple elements, I did the following:
As you should avoid inline JavaScript, I removed the function call from the HTML,
I added a data attribute on the buttons, and some other forEach() to work with multiple elements,
I added a 'None selected' when you tick and then untick something. (I didn't like having an empty button),
I've also added the disabled property when 'None selected', just because we can.
Here is a working snippet with all of it:
// Added this
// Made it for multiples, too!
var checkboxes = document.querySelectorAll('input[type=checkbox]');
var buttons = document.querySelectorAll('input[type=button]');
checkboxes.forEach(function(chkbx, index) {
chkbx.onchange = function() {
var name = chkbx.name;
var button = document.querySelector('input[type=button][data=' + name + ']')
button.value = getCheckedCheckboxesFor(name);
// Added some code to modify button if no checkbox is selected
button.removeAttribute("disabled");
if (button.value == '') {
button.value = 'None selected';
button.setAttribute("disabled", true);
}
}
})
// As you should avoid inline JS, added this too:
buttons.forEach(function(button, index) {
button.onclick = function() {
var name = this.getAttribute('data'); // Get data attribute
alert(getCheckedCheckboxesFor(name));
}
})
// Simplified a little this one:
function getCheckedCheckboxesFor(name) {
var checkeds = document.querySelectorAll('input[name="' + name + '"]:checked'),
values = [];
checkeds.forEach(function(chkd) {
values.push(chkd.value);
});
return values;
}
.check-multiple {
display: inline-block;
height: 60px;
overflow-y: scroll;
border: 1px solid gray;
}
.check-multiple input {
float: left;
}
.check-multiple label {
display: inline-block;
}
.check-multiple span {
display: inline-block;
width: 100%;
}
.check-multiple input:checked~span {
background: #03f;
color: white;
}
<div class="check-multiple">
<label for="veh"><input value="car" type="checkbox" name="veh"><span>car</span></label>
<label for="veh"><input value="scooter" type="checkbox" name="veh"><span>scooter</span></label>
<label for="veh"><input value="bus" type="checkbox" name="veh"><span>bus</span></label>
</div>
<br>
<input data="veh" type="button" value="Select to get values" disabled/>
<br>
<br>
<div class="check-multiple">
<label for="veh"><input value="car" type="checkbox" name="veh2"><span>car</span></label>
<label for="veh"><input value="scooter" type="checkbox" name="veh2"><span>scooter</span></label>
<label for="veh"><input value="bus" type="checkbox" name="veh2"><span>bus</span></label>
</div>
<br>
<input data="veh2" type="button" value="Select to get values" disabled/>
Hope it helps!

Your question is a bit weird formulated, is this what you are trying to accomplish?
EDIT: used onchange event to trigger the changing value of the button text on the checkboxes
function getCheckedCheckboxesFor(checkboxName) {
}
function myFunction(val) {
var checkboxes = document.querySelectorAll('input[name="' + val + '"]:checked'),
values = [];
Array.prototype.forEach.call(checkboxes, function(el) {
values.push(el.value);
});
document.getElementById("demo").value = values;
}
.check-multiple {
display: inline-block;
height: 60px;
overflow-y: scroll;
border: 1px solid gray;
}
.check-multiple input {
float: left;
}
.check-multiple label {
display: inline-block;
}
.check-multiple span {
display: inline-block;
width: 100%;
}
.check-multiple input:checked~span {
background: #03f;
color: white;
}
<div class="check-multiple">
<label for="veh"><input value="car" type="checkbox" name="veh" onchange="myFunction('veh')"><span>car</span></label>
<label for="veh"><input value="scooter" type="checkbox" name="veh" onchange="myFunction('veh')"><span>scooter</span></label>
<label for="veh"><input value="bus" type="checkbox" name="veh" onchange="myFunction('veh')"><span>bus</span></label>
</div>
<input type="button" onclick="alert(getCheckedCheckboxesFor('veh'));" value="Get Values" id="demo" />

how to update the value of select tag using javascript and these values can be multiple vaues

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;
}
}
.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>
<label>Department</label>
<div>
<div class="selectBox" onclick="showCheckboxes()">
<select class="form-control">
<option>-Select a Department-</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label>
<input type="checkbox" id="1" />bscs<br>
<input type="checkbox" id="1" />bsit<br>
<input type="checkbox" id="1" />mscs<br>
<input type="checkbox" id="1" />msit<br>
<input type="checkbox" id="1" />bba<br>
<input type="checkbox" id="1" />Dpt<br>
</label>
</div>
</div>
</form>
I am using checkbox in drop down list and is filled by dynamic values and i want to get checked values from the list and submit these values in the form.
Controller's Action method code
FYP_DB_Entities obj = new FYP_DB_Entities();
public ActionResult Index()
{
ViewBag.dept = obj.Departments.ToList();
return View();
}
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;
}
}
.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>
<div class="selectBox" onclick="showCheckboxes()">
<select class="form-control">
<option>-Select a Department-</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
#foreach (var s in ViewBag.dept) {
<label for="#s.Department_Id"><input type="checkbox" id="#s.Department_Id" />#s.Department_Id</label>
}
</div>
</div>
Here is the screenshot of the dropdownlist before Clicking on it
After Clicking on it

The easiest and tricky way to do this is to keep checkboxes code inside the Form tag and use the same name for all the checkboxes with different ids (to make them work for "for" attribute of label tag). Also, set the value of checkbox to departmentId. Your code will look like this:
<div id="checkboxes">
#foreach (var s in ViewBag.dept) {
<label for="#s.Department_Id"><input type="checkbox" id="#s.Department_Id" name="selectedDepartmentIds" value="#s.Department_Id" />#s.Department_Id</label>
}
</div>
add a new parameter at controller's action with name selectedDepartmentIds of type array. When you submit the form you will get selected department ids.