We Keep Coding

Change selected value div from one wrapper to another wrapper on selected option div

<div class="zones-riders-wrapper">
<div class="zones-rider-header">
<div class="row">
<div class="col-md-6">
<h5 class="rider-name">#drv.Drivername</h5>
</div>
<div class="col-md-6">
<p class="rider-trips">Weight/Trip (#drv.DriverCapacity)</p>
</div>
</div>
</div>
<div class="zones-filters">
<select>
<option>Move To</option>
#foreach (var drvName in Model.zoneDriver.Where(x => x.ZoneName == item.ZoneName))
{
<option>
#drvName.Drivername
</option>
}
</select>
</div>
<div id="zones-trips-body" class="zones-trips-body">
#foreach (var ord in Model.orderDetails.Where(x => x.ZoneName == item.ZoneName && x.DriverId == drv.DriverId))
{
<input class="zoneBodyId" type="hidden" value="#drv.DriverId" />
<div class="zones-trip">
#*<input type="checkbox" />*#
<label for="chkIsActive">
<div class="zone-check">
<input type="checkbox" name="IsActive" class="chkIsActive" class="switch">
<div class="zone-check-overlay"></div>
</div>
<div class="zone-order-id">
<label>Order ID</label>
<span>#ord.OrderId</span>
</div>
<div class="zone-order-receiver">
<label>Receiver Name</label>
<span>#ord.RecieverName</span>
</div>
<div class="zone-order-sender">
<label>Receiver Add.</label>
<span>#ord.RecieverAddress</span>
</div>
</label>
</div>
}
</div>
</div>
Script:
$(".zones-trip").click(function () {
$(this).find(".chkIsActive").click();
var zoneBox = $(this).closest(".zones-trip").html();
console.log(zoneBox);
//$(this).remove();
});
$(document).on("change", ".zones-filters select", function () {
var selectValue = $(".zones-filters select option:selected").val();
console.log(selectValue);
});
CSS:
.zone-check {
position: absolute;
display: inline-block;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.zone-check input[type=checkbox] {
opacity: 0;
position: absolute;
right: 20px;
top: 22px;
}
.zone-check input[type=checkbox]:checked + .zone-check-overlay {
display: inline-block;
width: 100%;
position: absolute;
right: 0;
height: 100%;
top: 0;
border-radius: 7px;
background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5242471988795518) 18%, rgba(255,255,255,1) 100%);
}
.zone-check input[type=checkbox]:checked {
opacity: 1;
z-index: 1;
}
.zones-trip {
position: relative;
}
this is my code, can anyone help me, I have stuck in this thing.
I have a checkbox and I have to select checkbox first then When I select rider name from dropdown, The selected div will move to selected rider list.
I have added snapshot in which the frontend is clear, thanks in advance , waiting for reply
please check the below image link
[1]: https://i.stack.imgur.com/qx4iq.png

multi-step form, not submitting on last stage

Update:
I have added new js code which fixed my issue and by adding it here, it may help others.
Multi-step form works (codepen), and I have integrated it into my server-side scripting. Still working. The code is all available here. (https://codepen.io/ActiveCodex/pen/OVBeMg#code-area) The button element labelled 'Next' moves the user along through the steps. On the last step, the JS changes the labelling of the button 'Next' to be a 'Submit' button but it doesn't submit to anywhere. I want to add that 'Submit' functionality without breaking the 'Next' button functionality. Either to submit via Ajax or the usual form 'post' method.
I wrapped the div id='form' into a <form> element and whilst that would submit, it did so even when the 'Next' button was clicked on and not only when the submit button was clicked.
(I'm not experienced in .js since perl & php are my norm). I added an event listener but the data is not in js variables. I am asking for tip on what I should be looking for - eg a listener or a submit function or something I can google for. I have tried to 'preventDefault()' but that has prevented everything on the form.
html code firstly...
<div id='form' class='form' action="/cgi-bin/real-estate-dashboard-dev/processing_scripts/edit-listings-data.pl" method='get'>
<h1 class='property_summary'>Property Summary</h1>
<input id="one" type="radio" name="stage" checked="checked" />
<input id="two" type="radio" name="stage" />
<input id="three" type="radio" name="stage" />
<input id="four" type="radio" name="stage" />
<input id="five" type="radio" name="stage" />
<input id="six" type="radio" name="stage" />
<div class="stages">
<label for="one">1</label>
<label for="two">2</label>
<label for="three">3</label>
<label for="four">4</label>
<label for="five">5</label>
<label for="six">6</label>
</div>
<span class="progress"><span></span></span>
<div class='panels'>
<div data-panel="one">
<h4>Stage 1</h4>
<p>Number of Receptions</p>
<select name="number_of_reception_rooms" style='padding: 10px;font-size:1.5em;'>
<option value='' style='font-weight:700;'>Number of Receptions</option>
<option value="1">1</option>
<option value="2" selected='selected'>2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div data-panel="two">
<h4>Stage 2</h4>
<p>Number of Ensuites</p>
<select name="number_of_ensuites" style='padding: 10px;font-size:1.5em;'>
<option value='' style='font-weight:700;'>Number of Ensuites</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5" selected='selected'>5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<button>Next</button>
</div>
<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script id="rendered-js">
$('.form .stages label').click(function () {
var radioButtons = $('.form input:radio');
var selectedIndex = radioButtons.index(radioButtons.filter(':checked'));
selectedIndex = selectedIndex + 1;
});
$('.form button').click(function () {
var radioButtons = $('.form input:radio');
var selectedIndex = radioButtons.index(radioButtons.filter(':checked'));
selectedIndex = selectedIndex + 2;
$('.form input[type="radio"]:nth-of-type(' + selectedIndex + ')').prop('checked', true);
if (selectedIndex == 6) {
$('button').html('Submit');
}
});
// not working at all as I mentioned.
document.getElementById("form").addEventListener("click", function(e)
{
var bedrooms = e.number_of_bedrooms;
e.preventDefault();
console.log( 'number_of_bedrooms ' + number_of_bedrooms);
})
//document.getElementById("myForm").submit();
</script>
```document.getElementById("form").addEventListener("click", function(e)
{
//var number_of_bedrooms = e.target.number_of_bedrooms;
e.preventDefault();
//console.log( 'number_of_bedrooms ' + number_of_bedrooms);
})
So the expected result is that the 'Next' button continues to step me through the form but on the last step, the submit button must submit the data in the div <id='form'> to a new script when I click it.
...code that fixed my issue...
$('#myForm button').click(function(e) {
var radioButtons = $('#myForm input:radio');
var selectedIndex = radioButtons.index(radioButtons.filter(':checked'));
var numberForButtonAction = selectedIndex;
numberForButtonAction = numberForButtonAction + 2;
selectedIndex = selectedIndex + 2;
$('.form input[type="radio"]:nth-of-type(' + selectedIndex + ')').prop('checked', true);
if (numberForButtonAction <= 5 ){
$('button').html('Next');
document.getElementById("myForm").addEventListener("click", function(event){
e.preventDefault();
});
}
if (numberForButtonAction == 6 ){
$('button').html('Submit');
document.getElementById("myForm").addEventListener("click", function(event){
e.preventDefault();
});
}
if (selectedIndex > 6) {
$('button').html('Submit');
}
});

I think I have a solution for you.
First of all, I wrapped the entire form with the form tag, and set onsubmit function (alter it for your needs).
The second thing I did was to change the onclick listener on the next button. I changed it from button tag to input tag with type="button". When the selected is equal to 6, I'm changing it to type="submit". That way, when you click the submit, the form will submit!, and when you click next it will to its regular action.
Here is the code:
$('.form .stages label').click(function() {
var radioButtons = $('.form input:radio');
var selectedIndex = radioButtons.index(radioButtons.filter(':checked'));
selectedIndex = selectedIndex + 1;
});
$('#last').click(function() {
var radioButtons = $('.form input:radio');
var selectedIndex = radioButtons.index(radioButtons.filter(':checked'));
selectedIndex = selectedIndex + 2;
$('.form input[type="radio"]:nth-of-type(' + selectedIndex + ')').prop('checked', true);
if (selectedIndex == 6) {
document.getElementById('last').value = "Submit";
document.getElementById('last').type = "submit";
return false;
}
});
function doSomething() {
console.log('submitted');
}
.stages {
font-size: 0;
text-align: justify;
}
.stages:after {
content: '';
display: inline-block;
font-size: 0;
text-align: justify;
width: 100%;
}
input[type="radio"] {
display: none;
}
.stages label {
background: #ffffff;
border: solid 5px #c0c0c0;
border-radius: 50%;
cursor: pointer;
display: inline-block;
font-size: 0;
font-weight: 700;
height: 50px;
line-height: 50px;
position: relative;
text-align: center;
vertical-align: top;
width: 50px;
z-index: 1;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.stages label:after {
content: '\2713';
color: #0cc39f;
display: inline-block;
font-size: 16px;
}
#one:checked~.stages label[for="one"],
#two:checked~.stages label[for="two"],
#three:checked~.stages label[for="three"],
#four:checked~.stages label[for="four"],
#five:checked~.stages label[for="five"],
#six:checked~.stages label[for="six"] {
border-color: #0cc39f;
}
.stages label.active {
border-color: purple !important;
}
#one:checked~.stages label,
#two:checked~.stages label[for="one"]~label,
#three:checked~.stages label[for="two"]~label,
#four:checked~.stages label[for="three"]~label,
#five:checked~.stages label[for="four"]~label,
#six:checked~.stages label[for="five"]~label {
font-size: 1rem;
}
#one:checked~.stages label:after,
#two:checked~.stages label[for="one"]~label:after,
#three:checked~.stages label[for="two"]~label:after,
#four:checked~.stages label[for="three"]~label:after,
#five:checked~.stages label[for="four"]~label:after,
#six:checked~.stages label[for="five"]~label:after {
display: none;
}
.progress>span {
background: #c0c0c0;
display: inline-block;
height: 5px;
transform: translateY(-2.75em);
transition: 0.3s;
width: 0;
}
#two:checked~.progress span {
width: calc(100% / 5 * 1);
}
#three:checked~.progress span {
width: calc(100% / 5 * 2);
}
#four:checked~.progress span {
width: calc(100% / 5 * 3);
}
#five:checked~.progress span {
width: calc(100% / 5 * 4);
}
#six:checked~.progress span {
width: calc(100% / 5 * 5);
}
.panels div {
display: none;
}
#one:checked~.panels [data-panel="one"],
#two:checked~.panels [data-panel="two"],
#three:checked~.panels [data-panel="three"],
#four:checked~.panels [data-panel="four"],
#five:checked~.panels [data-panel="five"],
#six:checked~.panels [data-panel="six"] {
display: block;
}
/* Custom code for the demo */
html,
button,
input,
select,
textarea {
font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
}
body {
background-color: #0cc39f;
margin: 0;
padding: 0 2em;
}
a {
color: #0cc39f;
}
h2,
h4 {
margin-top: 0;
}
.form {
background: #ffffff;
box-shadow: 0 5px 10px rgba(0, 0, 0, .4);
margin: 4em;
min-width: 480px;
padding: 1em;
}
.panels div {
border-top: solid 1px #c0c0c0;
margin: 1em 0 0;
padding: 1em 0 0;
}
input {
box-sizing: border-box;
display: block;
padding: .4em;
width: 100%;
}
#last {
background-color: #0cc39f;
border: 0;
color: #ffffff;
cursor: pointer;
font-weight: 700;
margin: 1em 0 0 0;
padding: 1em;
width: unset;
}
#last:hover {
opacity: 0.8;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form">
<h2>Multi Page Form (Pure CSS)</h2>
<p>Divide long forms, enable users to flick back and forward.</p>
<p>Use JS to validate form at the end of the stage and highlight tab(s) that contain(s) error.</p>
<form onsubmit="doSomething(); return false;">
<input id="one" type="radio" name="stage" checked="checked" />
<input id="two" type="radio" name="stage" />
<input id="three" type="radio" name="stage" />
<input id="four" type="radio" name="stage" />
<input id="five" type="radio" name="stage" />
<input id="six" type="radio" name="stage" />
<div class="stages">
<label for="one">1</label>
<label for="two">2</label>
<label for="three">3</label>
<label for="four">4</label>
<label for="five">5</label>
<label for="six">6</label>
</div>
<span class="progress"><span></span></span>
<div class="panels">
<div data-panel="one">
<h4>Stage 1</h4>
<input type="text" placeholder="First Name" />
</div>
<div data-panel="two">
<h4>Stage 2</h4>
<input type="text" placeholder="Last Name" />
</div>
<div data-panel="three">
<h4>Stage 3</h4>
<input type="text" placeholder="Address" />
</div>
<div data-panel="four">
<h4>Stage 4</h4>
<input type="text" placeholder="Email" />
</div>
<div data-panel="five">
<h4>Stage 5</h4>
<input type="text" placeholder="Phone Number" />
</div>
<div data-panel="six">
<h4>Stage 6</h4>
<input type="text" placeholder="Comment" />
</div>
</div>
<input type="button" id="last" value="Next">
<br><br>
</form>
</div>

Jquery - Contact field interaction

Hey guys I'm trying to create contect filed interaction. When we click on any field that label text should go up.I tried but didn't work and also attched my code for more clarity. Can you guys help me? Thanks:)
$('.form-grid').keyup(function() {
if ($(this).val()) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
.form-grid {
max-width: 200px;
position: relative;
margin-bottom: 25px;
}
.form-grid input,
.form-grid textarea {
height: 50px;
width: 100%;
border: none;
border-bottom: 1px solid #000000;
}
.form-grid label {
position: absolute;
top: 0;
left: 0;
margin: 0;
}
.form-grid.active label {
top: -15px;
}
<div class="form-grid">
<input type="text">
<label> Name </label>
</div>
<div class="form-grid">
<input type="email">
<label> Email </label>
</div>
<div class="form-grid">
<input type="tel">
<label> Phone </label>
</div>
<div class="form-grid">
<textarea></textarea>
<label> Message </label>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

That is because the $(this) element in your code actually refers to the div.form-grid node, which does not have a value attached to it. What you want is to select the nested input/textarea element, i.e. $(this).find('input, textarea').first().val():
$('.form-grid').keyup(function() {
if ($(this).find('input, textarea').first().val()) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
See proof-of-concept below:
$('.form-grid').keyup(function() {
if ($(this).find('input, textarea').first().val()) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
.form-grid {
max-width: 200px;
position: relative;
margin-bottom: 25px;
}
.form-grid input,
.form-grid textarea {
height: 50px;
width: 100%;
border: none;
border-bottom: 1px solid #000000;
}
.form-grid label {
position: absolute;
top: 0;
left: 0;
margin: 0;
}
.form-grid.active label {
top: -15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-grid">
<input type="text">
<label> Name </label>
</div>
<div class="form-grid">
<input type="email">
<label> Email </label>
</div>
<div class="form-grid">
<input type="tel">
<label> Phone </label>
</div>
<div class="form-grid">
<textarea></textarea>
<label> Message </label>
</div>
However, I would suggest not binding the keyup event listener to the wrapping div.form-grid. What you can do, is to bind the input event listener to the input element inside div.form-grid, and then simply toggle the class on the parent element instead:
$('.form-grid input, .form-grid textarea').on('input', function() {
var $formGrid = $(this).closest('.form-grid');
if (this.value)
$formGrid.addClass('active');
else
$formGrid.removeClass('active');
});
.form-grid {
max-width: 200px;
position: relative;
margin-bottom: 25px;
}
.form-grid input,
.form-grid textarea {
height: 50px;
width: 100%;
border: none;
border-bottom: 1px solid #000000;
}
.form-grid label {
position: absolute;
top: 0;
left: 0;
margin: 0;
}
.form-grid.active label {
top: -15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-grid">
<input type="text">
<label> Name </label>
</div>
<div class="form-grid">
<input type="email">
<label> Email </label>
</div>
<div class="form-grid">
<input type="tel">
<label> Phone </label>
</div>
<div class="form-grid">
<textarea></textarea>
<label> Message </label>
</div>

Try this method, its working fine.
$('.form-grid').on("input", function() {
$('.form-grid').removeClass('active');
$(this).addClass('active');
});

Add class respect to each input for handling lable tag
<div class="form-grid">
<textarea></textarea>
<label for="text_input"> Message </label>
</div>
In script keyup function
$('label[for="text_input"]').hide()
Try it.

Creating div with img src on checkbox selection

I'm trying to create a change function that creates a div for each checked checkbox selection and also removes the div when it's unchecked.
Inside these new divs I want to send the checkbox's img src as well.
*NOTE** My current JS is as far as I got and the second function only takes the img src from the selected checkbox and sends it to the image with id="loc-selected".
$(".loc-check").change(function(event) {
var x = $(this).val();
if ($(this).prop("checked") == true) {} else {}
});
function changeImg(elm) {
var val = elm.value;
var img = document.getElementById("img-" + val);
var src = img.src;
var imgSelectedRadio = document.getElementById("loc-selected");
imgSelectedRadio.src = src;
}
#loc-selected {
height: 50px;
width: 50px;
}
#loc-checkboxs {
display: flex;
padding: 20px;
}
#loc-checkboxs label {
display: block;
height: 38px;
width: 38px;
cursor: pointer;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loc-checkboxs">
<label for="usa">
<input class="loc-check" type="checkbox" id="usa" value="usa" onchange="changeImg(this)"/>
<span><img id="img-usa" src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a2f052996bde90001f96632_united-states-of-america.svg"><span>
</label>
<label for="canada">
<input class="loc-check" type="checkbox" id="canada" value="canada" onchange="changeImg(this)"/>
<span><img id="img-canada" src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a2cd7b0937442000184b147_canada.svg"><span>
</label>
<label for="uk">
<input class="loc-check" type="checkbox" id="uk" value="uk" onchange="changeImg(this)"/>
<span><img id="img-uk" src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a985a90ec8f79000104514a_united-kingdom.svg"><span>
</label>
</div>
<div class="new-div-wrapper">
<div class="new-div">
<img id="loc-selected"></img>
</div>
</div>

I modified your code to dynamically add items with the same class as the values of the the checkboxes. It then automatically removes it if you uncheck.
$("input.loc-check").change(function(event) {
var value = $(this).val();
if ($(this).is(":checked")) {
$(".new-div-wrapper").append($(this).next().clone().wrapAll("<div class='new-div'></div>").parent().addClass(value));
} else {
$(".new-div-wrapper ." + value).remove();
}
});
#loc-selected {
height: 50px;
width: 50px;
}
#loc-checkboxs {
display: flex;
padding: 20px;
}
#loc-checkboxs label {
display: block;
height: 38px;
width: 38px;
cursor: pointer;
position: relative;
}
.new-div {
width:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loc-checkboxs">
<label for="usa">
<input class="loc-check" type="checkbox" id="usa" value="usa"/>
<span><img id="img-usa" src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a2f052996bde90001f96632_united-states-of-america.svg" \></span>
</label>
<label for="canada">
<input class="loc-check" type="checkbox" id="canada" value="canada"/>
<span><img id="img-canada" src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a2cd7b0937442000184b147_canada.svg" \></span>
</label>
<label for="uk">
<input class="loc-check" type="checkbox" id="uk" value="uk"/>
<span><img id="img-uk" src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a985a90ec8f79000104514a_united-kingdom.svg" \></span>
</label>
</div>
<div class="new-div-wrapper">
</div>

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.