We Keep Coding

how to filter divs by checkbox using multiple classes

I have a product page that fetches the products from a database table, I am using foreach to pull each product & each product displays as a card and using classes to filter them.
The problem is that the checkbox filter isnt working properly with multiple values (classes), if I have 2 classes the filter is only detecting the 1st class rather than all the classes(filters).
So for example, if I check the "Blue" checkbox I wont see any results since the JS is searching for a div that has only that one class ("filt-blue") but I need it to display all divs that contain "filt-blue" as well as any other filters that may be added.
See more on JSFIDDLE
function change() {
var checkboxes = document.getElementsByClassName('checkbox');
var chekboxInputs = Array.from(checkboxes).map(a => a.querySelector('input'));
var allAreUnselected = chekboxInputs.every(function(elem) {
return !elem.checked;
});
if (allAreUnselected) {
chekboxInputs.forEach(function(input) {
Array.from(document.querySelectorAll("." + input.getAttribute("rel"))).forEach(function(item) {
item.style.display = 'block';
});
});
} else {
chekboxInputs.forEach(function(input) {
Array.from(document.querySelectorAll("." + input.getAttribute("rel"))).forEach(function(item) {
item.style.display = input.checked ? 'block' : 'none';
});
});
}
}
change();
#media(max-width:768px){
.card{
width:100% !important;
margin:12px 6px !important;
}
}
.card {
text-align:left;
border-radius:4px;
margin:24px;
width:320px;
min-height:340px;
transition: all 0.2s;
border:var(--image-select-border);
}
.cards {
display: flex;
flex-wrap: wrap;
justify-content:center;
}
.card-body {
flex: 1 1 auto;
padding:12px;
}
.card-title {
margin-bottom:16px;
padding:12px;
}
#media(max-width:768px){
.card-img-top{
width:240px !important;
}
}
#media(max-width:768px){
.filtbtn{
width:90% !important;
margin-left:5% !important;
float:none !important;
}
}
.filterDiv {
display: none;
}
.show {
display: block;
}
#media(max-width:768px){
#opts{
margin-left:5% !important;
}
}
.optsel{
border-bottom:2px solid #0d6efd;
border-top: none;
border-left: none;
border-right: none;
}
.sidebar {
height:100%;
width:0;
position:fixed;
z-index:1;
top:76px;
right:0;
background-color:#111;
overflow-x:hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding:8px 12px;
text-decoration: none;
font-size:16px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar .closebtn {
position: absolute;
top: 0;
margin-right:12px;
font-size:18px;
color:#222 !important;
background-color:#fff;
width:100%;
}
#media(max-width:768px){
.closebtn{
top:4px !important;
}
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
#main {
transition: margin-right .5s; /* If you want a transition effect */
padding: 20px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 22px;}
}
.optbtn{
background-color:#fff;
color: #222;
cursor: pointer;
padding:14px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 16px;
transition: 0.4s;
}
.accordion {
background-color:#111;
color: #fff !important;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.notaccordion {
background-color:#111;
color: #fff !important;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: center;
outline: none;
font-size:18px;
transition: 0.4s;
font-weight:bolder;
}
.active, .accordion:hover {
opacity:0.9;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.filterpanel {
padding:0 18px;
background-color:#fff;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.checkbox{
color:#222 !important;
padding:12px 12px;
}
.checkbox-button {
cursor: pointer;
}
.checkbox span{
margin-left:12px;
}
.checkbox input[type=checkbox] {
box-sizing: border-box;
padding: 0;
}
.checkbox input {
font-size: 1rem;
line-height: 1.5;
padding: 11px 23px;
border: 1px solid black;
border-radius: 0;
outline: 0;
background-color: transparent;
}
.checkbox-button__input {
opacity: 0;
position: absolute;
}
.checkbox-button__control {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
vertical-align: middle;
background-color: inherit;
color: #017b5f;
border: 2px solid #666;
}
.checkbox-button__input:checked+.checkbox-button__control:after {
content: "";
display: block;
position: absolute;
top: 2px;
left: 2px;
width: 12px;
height: 12px;
background-color:#0d6efd;
}
.checkbox-button__input:checked+.checkbox-button__control {
border-color:black;
border:2px solid black;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" id="bootstrap-css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<div class="filter">
<div class="checkbox">
<label class="checkbox-button">
<input type="checkbox" class="checkbox-button__input" id="choice1-1" name="choice1" onchange="change()" rel="filt-blue">
<span class="checkbox-button__control"></span>
</label>
<span><b>blue</b></span>
</div>
</div>
<div class="filter">
<div class="checkbox">
<label class="checkbox-button">
<input type="checkbox" class="checkbox-button__input" id="choice1-2" name="choice1" onchange="change()" rel="filt-red">
<span class="checkbox-button__control"></span>
</label>
<span><b>red</b></span>
</div>
</div>
<hr>
<div class="filter">
<div class="checkbox">
<label class="checkbox-button">
<input type="checkbox" class="checkbox-button__input" id="choice1-1a" name="choice2" onchange="change()" rel="filt-long">
<span class="checkbox-button__control"></span>
</label>
<span><b>long</b></span>
</div>
</div>
<div class="filter">
<div class="checkbox">
<label class="checkbox-button">
<input type="checkbox" class="checkbox-button__input" id="choice1-2a" name="choice2" onchange="change()" rel="filt-short">
<span class="checkbox-button__control"></span>
</label>
<span><b>short</b></span>
</div>
</div>
<div class="cards">
<div class="card filt-blue filt-long">
<h6 class="card-title"><b><?php echo $fetch['title'];?></b></h6>
<center><img src="/images/products/<?php echo $fetch['Img'];?>" class="card-img-top" style="width:160px;margin:0 auto;"></center>
<div class="card-body">
<small><?php echo $fetch['detail'];?></small>
<h6><b>Starting from - £<?php echo $fetch['SFprice'];?></b></h6>
</div>
</div>
<div class="card filt-blue filt-short">
<h6 class="card-title"><b><?php echo $fetch['title'];?></b></h6>
<center><img src="/images/products/<?php echo $fetch['Img'];?>" class="card-img-top" style="width:160px;margin:0 auto;"></center>
<div class="card-body">
<small><?php echo $fetch['detail'];?></small>
<h6><b>Starting from - £<?php echo $fetch['SFprice'];?></b></h6>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

This code should help your filter take into account multiple classes. There's a couple of ways you can filter. For example, if you have "long and blue" do you want to show ONLY long and blue? Or would you want to show a "Red Long" as well. This particular code takes into account multiple filter classes but in a logical OR fashion instead of an AND logic.
<body>
<label>Blue</label>
<input type="checkbox" name="filter-blue" onchange="change()">
<label>Red</label>
<input type="checkbox" name="filter-red" onchange="change()">
<label>Long</label>
<input type="checkbox" name="filter-long" onchange="change()">
<label>Short</label>
<input type="checkbox" name="filter-short" onchange="change()">
<div class="cards">
<p class="filter-blue">Blue Jeans</p>
<p class="filter-blue">Blue Cups</p>
<p class="filter-red">Red Shirt</p>
<p class="filter-red">Red Shirt</p>
<p class="filter-red filter-long">Long Red Shirt</p>
<p class="filter-red filter-short">Short Red Shirt</p>
<p class="filter-blue filter-long">Long Blue Shirt</p>
<p class="filter-blue filter-short">Short Blue Shirt</p>
</div>
<script type="text/javascript">
function change() {
// Step 1 - Get checked filters
let checkboxes = document.querySelectorAll('input[type="checkbox"]'),
filtered = [];
checkboxes.forEach(checkbox => {
if (checkbox.checked) {
filtered.push(checkbox.name);
}
});
// Step 2 - Show cards based on the filters
let cards = document.querySelectorAll('.cards p');
cards.forEach(card => {
if (
filtered.length === 0 || // If no filter is checked then show everything
filtered.some(r => card.classList.contains(r)) // If the filter matches the cards class. Filter it.
) {
card.style.display = 'block';
} else {
card.style.display = 'none';
}
});
}
</script>
</body>

Why doesn't the current code work?
Your code iterates over every input, finding all cards matching that input. The first input is blue, and the code iterates over all cards and correctly displays those matching blue. But it then continues to the next iteration, the red checkbox. No cards match and so they are both immediately hidden. So any matching card(s) are actually shown and then immediately hidden.
OK, how do we fix it?
Here's my approach:
Since we need to evaluate all checkboxes for each indvidual card, flip the order of iteration - for each card, iterate over each checkbox (rather than the other way around as you have);
Evaluate each checkbox: if it is checked and the current card has that attribute, flag it as matching, and continue checking the other checkboxes;
But if the checkbox is checked and the current card does not have that attribute, flag it as a non-match. Now we must immeidately bail out, so a future match doesn't override this failure;
After we've checked all inputs (or bailed out on a failure), display or hide the card depending on the final state of our match;
function change() {
var checkboxes = document.getElementsByClassName('checkbox');
var chekboxInputs = Array.from(checkboxes).map(a => a.querySelector('input'));
var allAreUnselected = chekboxInputs.every(function(elem) {
return !elem.checked;
});
if (allAreUnselected) {
chekboxInputs.forEach(function(input) {
Array.from(document.querySelectorAll("." + input.getAttribute("rel"))).forEach(function(item) {
item.style.display = 'block';
});
});
} else {
Array.from(document.querySelectorAll(".card")).forEach(function(card) {
// console.log('Start card: ', card);
let match = false;
for (const input of chekboxInputs) {
let attribute = input.getAttribute("rel");
// console.log('processing input with rel:', attribute);
if (input.checked && card.classList.contains(attribute)) {
// console.log('input is checked and card matches');
match = true;
} else if (input.checked && ! card.classList.contains(attribute)) {
// console.log('input is checked and card does not match');
match = false;
break;
}
}
// console.log('done checking inputs, match is:', match);
card.style.display = match ? 'block' : 'none';
});
}
}
change();
.card {
border: 1px solid black;
}
<div class="checkbox">
<input type="checkbox" name="choice1" onchange="change()" rel="filt-blue">
<span><b>blue</b></span>
</div>
<div class="checkbox">
<input type="checkbox" name="choice1" onchange="change()" rel="filt-red">
<span><b>red</b></span>
</div>
<div class="checkbox">
<input type="checkbox" name="choice2" onchange="change()" rel="filt-long">
<span><b>long</b></span>
</div>
<div class="checkbox">
<input type="checkbox" name="choice2" onchange="change()" rel="filt-short">
<span><b>short</b></span>
</div>
<br><br>
<div class="cards">
<div class="card filt-blue filt-long">
<b>Blue Long</b>
</div>
<div class="card filt-blue filt-short">
<b>Blue Short</b>
</div>
</div>
Notes
It is generally considered good practice to separate your HTML and JS. Here that would mean removing the inline onchange="change()" in the HTML, and replacing them with an event handler in the JS:
let checkbox = document.querySelector("input[name=checkbox]");
checkbox.addEventListener('change', change);
You will make it so much easier for others to help if you can create a minimal, complete, and verifiable example of the problem. In this case a good chunk of the time I spent on this problem was evaulating what I could strip out - a lot of the HTML and most of the CSS classes are irrlevant. The PHP obviously does not work, and none of the CSS matters. Neither Bootstrap nor jQuery CSS or JS refs are necessary.
When you strip out everything not related to the problem it is that much easier to understand, debug, and work with.

Show hide Div based on toggle Switch

I'm trying to make a toggle switch work, which will show/hide classes based on if it is checked or unchecked. By default i want to show "pay annually" so it will display the annual price, also a text blub further down the page. If i click "pay monthly" it will display the monthly price, and a monthly text blurb further down the page.
I tried to follow some solution, but at the moment all are showing, and nothing toggles. How can i fix this?
link to codepen
function showHide(e) {
const el = e.target;
if (el.checked) {
el.dataset.checked.split(',').forEach(fld => document.getElementById(fld).parentNode.style.display = 'block');
el.dataset.notChecked.split(',').forEach(fld => document.getElementById(fld).parentNode.style.display = 'none' );
} else {
el.dataset.checked.split(',').forEach(fld => document.getElementById(fld).parentNode.style.display = 'none' );
el.dataset.notChecked.split(',').forEach(fld => document.getElementById(fld).parentNode.style.display = 'block');
}
}

Using jQuery :
$(document).ready(function() {
var checkBoxes = $("input[name='toggle']");
toggle();
$("#toggle").click(function() {
toggle();
});
function toggle() {
if (checkBoxes.prop("checked")) {
$('#coreMonthlyText,#coreMonthlyPrice').show('slow');
$('#coreAnnuallyText,#coreAnnuallyPrice').hide('slow');
} else {
$('#coreMonthlyText,#coreMonthlyPrice').hide('slow');
$('#coreAnnuallyText,#coreAnnuallyPrice').show('slow');
}
}
});
.pricing-box {
background: red;
padding: 25px
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
}
.toggle-switch {
cursor: pointer;
background-color: gray;
display: inline-block;
border: 0;
padding-left: 0;
padding-right: 0;
}
.toggle-switch input {
display: none;
}
.toggle-switch,
.toggle-switch span {
border-radius: 35px;
border-style: solid;
border-color: transparent;
padding-top: .75rem;
padding-bottom: .75rem;
}
.toggle-switch span {
border-width: 2px;
padding-left: .75rem;
padding-right: .75rem;
}
.toggle-switch input:checked+span+span,
.toggle-switch input+span {
border-color: #444;
background-color: white;
}
.toggle-switch input+span+span,
.toggle-switch input:checked+span {
background-color: transparent;
border-color: transparent;
}
#coreMonthlyText,
#coreMonthlyPrice,
#coreAnnuallyText,
#coreAnnuallyPrice {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pricing-box">
<div class="row">
<div class="column">
<div class="core">
<h2>Core</h2>
</div>
</div>
<div class="column">
<div id="coreAnnuallyPrice" class="coreAnnuallyPrice">
$2,399/yr<br /> Normally $3,588/yr
</div>
<div id="coreMonthlyPrice" class="coreMonthlyPrice">
$299/pm<br /> first 2 months free
</div>
</div>
</div>
<label for="toggle" class="toggle-switch">
<input class="toggle-button" id="toggle" type="checkbox" name="toggle" data-checked="coreAnnuallyPrice,coreAnnuallyText" data-not-checked="coreMonthlyPrice,coreMonthlyText">
<span>pay annually</span>
<span>pay monthly</span>
</label>
</div>
<p id="coreAnnuallyText" class="center_text big-text coreAnnuallyText">this is a annual text blurb</p>
<p id="coreMonthlyText" class="center_text big-text coreMonthlyText">this is a monthly text blurb.</p>

JavaScript checkbox dropdown style not working [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
Beginner here.
My functionality is working, but at the moment it shows the checkboxes already dropped down.
I want to hit the drop down in order to see the boxes.
Help!
<style>
.multiselect {
width: 450px;
}
.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;
}
</style>
And here is the second part, I'm not sure what I'm doing wrong any help would be highly appreciated.
This is the HTML.
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes(0)">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes-0">
<input type="checkbox" name="at0[]" id="one" value="red" />red
<input type="checkbox" name="at0[]" id="two" value="blue" />blue
<input type="checkbox" name="at0[]" id="three" value="green" />green
<script>
var cbOneExpanded = false;
var cbTwoExpanded = false;
function showCheckboxes(id) {
var checkboxes = document.getElementById('checkboxes-' + id);
if (id > 0) {
if (!cbTwoExpanded) {
checkboxes.style.display = 'block';
cbTwoExpanded = true;
} else {
checkboxes.style.display = 'none';
cbTwoExpanded = false;
}
} else {
if (!cbOneExpanded) {
checkboxes.style.display = 'block';
cbOneExpanded = true;
} else {
checkboxes.style.display = 'none';
cbOneExpanded = false;
}
}
}
</script>
Thanks again.

You are almost there. First just hide the div that contains the boxes and then in your js function display the div.
var cbOneExpanded = false;
var cbTwoExpanded = false;
function showCheckboxes(id) {
var checkboxes = document.getElementById('checkboxes-' + id);
var x = document.getElementById('checkboxes-0');
x.style.display = "block";
if (id > 0) {
if (!cbTwoExpanded) {
checkboxes.style.display = 'block';
cbTwoExpanded = true;
} else {
checkboxes.style.display = 'none';
cbTwoExpanded = false;
}
} else {
if (!cbOneExpanded) {
checkboxes.style.display = 'block';
cbOneExpanded = true;
} else {
checkboxes.style.display = 'none';
cbOneExpanded = false;
}
}
}
.multiselect {
width: 450px;
}
.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="multiselect">
<div class="selectBox" onclick="showCheckboxes(0)">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes-0" style='display:none'>
<input type="checkbox" name="at0[]" id="one" value="red"/>red
<input type="checkbox" name="at0[]" id="two" value="blue"/>blue
<input type="checkbox" name="at0[]" id="three" value="green"/>green
And here is the rest

Check this.I don't know if it's what you are looking for but it's working.
<script>
$(document).ready(function(){
$("#checkboxes-0").css("display","none");
flag = true;
$(".selectBox").on("click",function(){
if(flag){
$("#checkboxes-0").css("display","block");
flag = false;
}else{
$("#checkboxes-0").css("display","none");
flag = true;
}
});
});
</script>
</head>
<body>
<style>
.multiselect {
width: 450px;
}
.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;
}
</style>
<div class="multiselect">
<div class="selectBox">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes-0">
<input type="checkbox" name="at0[]" id="one" value="red" />red
<input type="checkbox" name="at0[]" id="two" value="blue" />blue
<input type="checkbox" name="at0[]" id="three" value="green" />green
</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.

Showing/hiding <div> with JavaScript

I wrote simple JavaScript to show hidden <div> after clicking another <div>. Everything works fine however when clicking checkbox in that <div> the hidden one appears and hides instantly.
$(document).ready(function() {
$('#click1').click(function() {
if ($('#hidden1').is(':hidden')) {
$('#hidden1').show(500);
} else {
$('#hidden1').hide(500);
}
});
});
.divCell {
width: 500px;
height: 35px;
margin: 2px 0;
display: inline-block;
background-color: #D4F78F;
}
.checkbox_div {
width: 25px;
position: relative;
margin: 5px;
float: left;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label {
width: 25px;
height: 25px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
background-color: white;
border-radius: 4px;
}
.div_name_divcell {
line-height: 35px;
width: auto;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="divCell" id="click1">
<div class="checkbox_div">
<input type="checkbox" id="checkbox1">
<label for="checkbox1"><span></span>
</label>
</div>
<div class="div_name_divcell">Name1</div>
</div>
<div id="hidden1" style="display: none;">
hidden text
</div>
Fiddle:
https://jsfiddle.net/mamzj4tw/

Add event.preventdefault to your code
$(document).ready(function() {
$('#click1').click(function(event) {
event.preventDefault();
if ($('#hidden1').is(':hidden')) {
$('#hidden1').show(500);
} else {
$('#hidden1').hide(500);
}
});
});
Here is the Fiddle: https://jsfiddle.net/mamzj4tw/1/

You can use just return false;
$(document).ready(function() {
$('#click1').click(function() {
if ($('#hidden1').is(':hidden')) {
$('#hidden1').show(500);
} else {
$('#hidden1').hide(500);
}
return false;
});
});
https://jsfiddle.net/shadiq_aust/m91wf79y/1/