We Keep Coding

Checking checkboxes in jquery validation

I have several rows of checkboxes. The scenario is that when I click a checkbox in the first row, and when I click another checkbox in the second or third row and within the same column, the previous checked checkbox is unchecked and the new one is checked. This is working fine. My issue is that when I uncheck the newly checked checkbox, it should re-check the previous checkbox checked. Anyone who can help me with this please ?
The demo is as per below.
$('.js-cars-item [type="checkbox"]').change(function() {
var idx = $(this).closest('li').index(); //Get the index - Number in order
var chk = $(this).is(":checked"); //Get if checked or not
var obj = this; //Checkbox object
$('.js-cars-item').each(function() { //Loop every js-cars-item
//Find the checkbox with the same index of clicked checkbox. Change disabled property
$(this).find('li:eq(' + idx + ') [type="checkbox"]').not(obj).prop("checked", false);
});
var checkeds = [];
$(".cars-item input:checkbox:checked").each(function(index) {
checkeds[index] = $(this).attr('id');
});
console.clear();
console.log("These are checked:", checkeds);
})
.cars-item {
border-bottom: 1px solid gray;
}
ul {
/* Added to fully show console in snippet */
margin: 2px;
}
li {
display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-3">
<label for="car-1-3"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-3">
<label for="car-2-3"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-3">
<label for="car-3-3"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-3">
<label for="car-4-3"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-3">
<label for="car-5-3"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-4">
<label for="car-1-4"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-4">
<label for="car-2-4"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-4">
<label for="car-3-4"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-4">
<label for="car-4-4"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-4">
<label for="car-5-4"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-5">
<label for="car-1-5"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-5">
<label for="car-2-5"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-5">
<label for="car-3-5"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-5">
<label for="car-4-5"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-5">
<label for="car-5-5"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-6>
<label for="car-1-6"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-6">
<label for="car-2-6"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-6">
<label for="car-3-6"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-6">
<label for="car-4-6"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-6">
<label for="car-5-6"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-7>
<label for="car-1-7"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-7">
<label for="car-2-7"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-7">
<label for="car-3-7"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-7">
<label for="car-4-7"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-7">
<label for="car-5-7"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-8">
<label for="car-1-8"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-8">
<label for="car-2-8"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-8">
<label for="car-3-8"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-8">
<label for="car-4-8"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-8">
<label for="car-5-8"><i class="icon-tick"></i></label>
</li>
</ul>
</div>

I have updated your javascript code, please try this:
$('.js-cars-item [type="checkbox"]').change(function() {
var idx = $(this).closest('li').index(); //Get the index - Number in order
var chk = $(this).is(":checked"); //Get if checked or not
var obj = this; //Checkbox object
if(chk)
{ //If it is checked
$('.previous_'+idx).removeClass('previous_'+idx); //Remove the 'previous_$index' class from the checkbox
$('.js-cars-item').find('li:eq(' + idx + ') [type="checkbox"]:checked').not(obj).addClass('previous_'+idx).prop("checked", false); //set the 'previous_$index' class to an existing checked checkbox and remove the checked property
}
else if($('.previous_'+idx).length)
{ //If the 'previous_$index' class is available while uncheck the current checkbox
$('.previous_'+idx).prop("checked", true).removeClass('previous_'+idx); //set the 'previous_$index' class's checkbox to checked and remove this class
$(obj).addClass('previous_'+idx); //set the 'previous_$index' class to the currently unchecked checkbox
}
var checkeds = [];
$(".cars-item input:checkbox:checked").each(function(index) {
checkeds[index] = $(this).attr('id');
});
console.clear();
console.log("These are checked:", checkeds);
})
.cars-item {
border-bottom: 1px solid gray;
}
ul {
/* Added to fully show console in snippet */
margin: 2px;
}
li {
display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-3">
<label for="car-1-3"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-3">
<label for="car-2-3"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-3">
<label for="car-3-3"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-3">
<label for="car-4-3"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-3">
<label for="car-5-3"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-4">
<label for="car-1-4"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-4">
<label for="car-2-4"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-4">
<label for="car-3-4"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-4">
<label for="car-4-4"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-4">
<label for="car-5-4"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-5">
<label for="car-1-5"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-5">
<label for="car-2-5"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-5">
<label for="car-3-5"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-5">
<label for="car-4-5"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-5">
<label for="car-5-5"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
<div class="cars-item js-cars-item">
<ul> </
<li>
<input type="checkbox" id="car-1-6">
<label for="car-1-6"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-6">
<label for="car-2-6"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-6">
<label for="car-3-6"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-6">
<label for="car-4-6"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-6">
<label for="car-5-6"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-7">
<label for="car-1-7"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-7">
<label for="car-2-7"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-7">
<label for="car-3-7"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-7">
<label for="car-4-7"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-7">
<label for="car-5-7"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-8">
<label for="car-1-8"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-8">
<label for="car-2-8"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-8">
<label for="car-3-8"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-8">
<label for="car-4-8"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-8">
<label for="car-5-8"><i class="icon-tick"></i></label>
</li>
</ul>
</div>

Enable Checkbox based on Radio Button Selection

I have Group of Checkbox , inside Treeview (bootstrap)
I'm Trying to create from each in the top Radio Button , Show and Hide function for specif Checkbox
Everything I've tried so far has failed.
I have 5 Radio button :
-
Radio button 1 show all checkbox with id matching FCB & FCTK - HIDE
THE REST
Radio button 2 show only all check boxes with id matching FCB - HIDE THE REST
Radio Button 3 show only all check boxes with id matching FCTK- HIDE THE REST
Radio button 4 show All Check boxes
Radio button 5 i will add new checkbox that he can show ALL options
and the new added check boxes
any idea how to correctly do this?
I have an a idea but i failed when i tried to do it:
I thought of doing an array with each Checkbox ID, and then search document elements and create foreach loop, Is that possible?
<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> -->
<title>" TZ Generator</title>
</head>
<body>
<form class="form-horizontal" action="ConstructorMain.php" method="post">
<fieldset>
<!-- Form Name -->
<!-- <legend>Documents Generator</legend>-->
<nav class="navbar navbar-default no-margin">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header fixed-brand">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" id="menu-toggle">
<span class="glyphicon glyphicon-th-large" aria-hidden="true"></span>
</button>
<a class="navbar-brand" href="#"><i class="fa fa-rocket fa-4"></i> " OTSP Team</a>
</div><!-- navbar-header-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active" ><button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2"> <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span></button></li>
</ul>
</div><!-- bs-example-navbar-collapse-1 -->
</nav>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="filename">Company Name</label>
<div class="col-md-4">
<input id="filename" name="filename" type="text" placeholder="" class="form-control input-md" required="">
<span class="help-block">File name for the generated file</span>
</div>
</div>
<!-- Certified Or Non -->
<div class="form-group">
<label class="col-md-4 control-label" for="type">Product Type</label>
<div class="col-md-4">
<div class="radio">
<label for="type-0">
<input type="radio" name="type" id="type-0" onchange="checkcert();" value="cert"> Certified " Products
</label>
</div>
<div class="radio">
<label for="type-3">
<input type="radio" name="type" id="type-3" onchange="checkcertFCB();" value="certFCB"> Certified " Products By FCB
</label>
</div>
<div class="radio">
<label for="type-4">
<input type="radio" name="type" id="type-4" onchange="checkcertFCTK();" value="certFCTK"> Certified " Products By FCTK
</label>
</div>
<div class="radio">
<label for="type-1">
<input type="radio" name="type" id="type-1" onchange="checkcertNON();" value="non"> Non-Certified " Product
</label>
</div>
<div class="radio">
<label for="type-2">
<input type="radio" name="type" id="type-2" onchange="checkcertUNI();" value="full"> Universal
</label>
</div>
</div>
</div>
<!-- AV & CC -->
<div class="form-group">
<label class="col-md-4 control-label" for="avcc[]">Protection Type</label>
<div class="col-md-4">
<div class="checkbox">
<label for="avcc-0">
<input type="checkbox" name="avcc-0" id="avcc-0[]" value="AV.docx"> Anti-virus
</label>
</div>
<div class="checkbox">
<label for="avcc-1">
<input type="checkbox" name="avcc-1" id="avcc-1[]" value="CC.docx"> Control Center
</label>
</div>
</div>
</div>
<!-- Product Line Tree New -->
<br></br>
<div class="form-group">
<label class="col-md-4 control-label" for="ostype">Operating System Platform</label>
<div class="col-md-4">
<div id="selection">
<ul> <!-- DSS -->
<li>
<input type="checkbox" name="DSS" id="DSS-0[]" value="DSS-TXT.docx">
<label for="DSS">DSS :</label>
<ul>
<li id="DSS-1-tree">
<input type="checkbox" name="DSS-1" id="DSS-1[]" value="DSS-WIN.docx">
<label for="DSS-1">Windows</label>
</li>
<li id="DSS-3-tree">
<input type="checkbox" name="DSS-3" id="DSS-3[]" value="DSS-WIN-CERT-FCB.docx">
<label for="DSS-3">Windows CERT-FCB</label>
</li>
<li id="DSS-4-tree">
<input type="checkbox" name="DSS-4" id="DSS-4[]" value="DSS-WIN-CERT-FCTK.docx">
<label for="DSS-4">Windows CERT-FCTK</label>
</li>
<li id="DSS-2-tree">
<input type="checkbox" name="DSS-2" id="DSS-2[]" value="DSS-LINUX.docx">
<label for="DSS-2">Linux</label>
</li>
<li id="DSS-5-tree">
<input type="checkbox" name="DSS-5" id="DSS-5[]" value="DSS-LINUX-CERT-FCB.docx">
<label for="DSS-5">Linux CERT-FCB</label>
</li>
<li id="DSS-6-tree">
<input type="checkbox" name="DSS-6" id="DSS-6[]" value="DSS-LINUX-CERT-FCTK.docx">
<label for="DSS-6">Linux CERT-FCTK</label>
</li>
</ul>
</li>
<br></br>
<li> <!-- SSS -->
<input type="checkbox" name="SSS" id="SSS-0[]" value="SSS-TEXT.docx">
<label for="SSS">SSS :</label>
<ul>
<li id="SSS-1-tree">
<input type="checkbox" name="SSS-1" id="SSS-1[]" value="SSS-WIN.docx">
<label for="SSS-1">Windows</label>
</li>
<li id="SSS-3-tree">
<input type="checkbox" name="SSS-3" id="SSS-3[]" value="SSS-WIN-CERT-FCB.docx">
<label for="SSS-3">Windows CERT-FCB</label>
</li>
<li id="SSS-5-tree">
<input type="checkbox" name="SSS-5" id="SSS-5[]" value="SSS-WIN-CERT-FCTK.docx">
<label for="SSS-5">Windows CERT-FCTK</label>
</li>
<li id="SSS-2-tree">
<input type="checkbox" name="SSS-2" id="SSS-2[]" value="SSS-LINUX.docx">
<label for="SSS-2">Linux</label>
</li>
<li id="SSS-4-tree">
<input type="checkbox" name="SSS-4" id="SSS-4[]" value="SSS-LINUX-CERT-FCB.docx">
<label for="SSS-4">Linux CERT-FCB</label>
</li>
<li id="SSS-6-tree">
<input type="checkbox" name="SSS-6" id="SSS-6[]" value="SSS-LINUX-CERT-FCTK.docx">
<label for="SSS-6">Linux CERT-FCTK</label>
</li>
</ul>
</li>
<br></br>
<li> <!-- MSS -->
<input type="checkbox" name="MSS" id="MSS-0[]" value="MSS-TXT.docx">
<label for="MSS">MSS :</label>
<ul>
<li id="MSS-1-tree">
<input type="checkbox" name="MSS-1" id="MSS-1[]" value="MSS-LINUX.docx">
<label for="MSS-1">Unix Mail Server </label>
</li>
<li id="MSS-5-tree">
<input type="checkbox" name="MSS-5" id="MSS-5[]" value="MSS-LINUX-CERT-FCB.docx">
<label for="MSS-5">Unix Mail Server CERT-FCB</label>
</li>
<li id="MSS-6-tree">
<input type="checkbox" name="MSS-6" id="MSS-6[]" value="MSS-LINUX-CERT-FCTK.docx">
<label for="MSS-6">Unix Mail Server CERT-FCTK</label>
</li>
<li id="MSS-2-tree">
<input type="checkbox" name="MSS-2" id="MSS-2[]" value="MSS-EXCH.docx">
<label for="MSS-2">MS Exchange</label>
</li>
<li id="MSS-7-tree">
<input type="checkbox" name="MSS-7" id="MSS-7[]" value="MSS-EXCH-CERT-FCB.docx">
<label for="MSS-7">MS Exchange CERT-FCB</label>
</li>
<li id="MSS-8-tree">
<input type="checkbox" name="MSS-8" id="MSS-8[]" value="MSS-EXCH-CERT-FCTK.docx">
<label for="MSS-8">MS Exchange CERT-FCTK</label>
</li>
<li id="MSS-3-tree">
<input type="checkbox" name="MSS-3" id="MSS-3[]" value="MSS-LOUTS.docx">
<label for="MSS-3">Lotus</label>
<ul>
<li id="MSS-3-1-tree">
<input type="checkbox" name="MSS-3-1" id="MSS-3-1[]" value="MSS-LOUTS-WIN.docx">
<label for="MSS-3-1">Lotus For Windows</label>
</li>
</ul>
<ul>
<li id="MSS-3-2-tree">
<input type="checkbox" name="MSS-3-2" id="MSS-3-2[]" value="MSS-LOUTS-LINUX.docx">
<label for="MSS-3-2">Lotus For Linux</label>
</li>
</ul>
</li>
<li id="MSS-4-tree">
<input type="checkbox" name="MSS-4" id="MSS-4[]" value="MSS-KERIO-TEXT.docx">
<label for="MSS-4">Kerio</label>
<ul>
<li id="MSS-4-1-tree">
<input type="checkbox" name="MSS-4-1" id="MSS-4-1[]" value="MSS-KERIO-WIN.docx">
<label for="MSS-4-1">Kerio For Windows</label>
</li>
</ul>
<ul>
<li id="MSS-4-2-tree">
<input type="checkbox" name="MSS-4-2" id="MSS-4-2[]" value="MSS-KERIO-LINUX.docx">
<label for="MSS-4-2">Kerio For Linux</label>
</li>
</ul>
</li>
</ul>
</li>
<br></br>
<li> <!-- GSS -->
<input type="checkbox" name="GSS" id="GSS-0[]" value="GSS-TEXT.docx">
<label for="GSS">GSS :</label>
<ul>
<li id="GSS-1-tree">
<input type="checkbox" name="GSS-1" id="GSS-1[]" value="GSS-Kerio-Winroute.docx">
<label for="GSS-1">Kerio Winroute</label>
</li>
<li id="GSS-2-tree">
<input type="checkbox" name="GSS-2" id="GSS-2[]" value="GSS-UNIX.docx">
<label for="GSS-2">Unix gateways</label>
</li>
<li id="GSS-6-tree">
<input type="checkbox" name="GSS-6" id="GSS-6[]" value="GSS-UNIX-CERT-FCB.docx">
<label for="GSS-6">Unix gateways CERT-FCB</label>
</li>
<li id="GSS-7-tree">
<input type="checkbox" name="GSS-7" id="GSS-7[]" value="GSS-UNIX-CERT-FCTK.docx">
<label for="GSS-7">Unix gateways CERT-FCTK</label>
</li>
<li id="GSS-3-tree">
<input type="checkbox" name="GSS-3" id="GSS-3[]" value="GSS-Qbik.docx">
<label for="GSS-3">Qbik</label>
</li>
<li id="GSS-4-tree">
<input type="checkbox" name="GSS-4" id="GSS-4[]" value="GSS-MIME.docx">
<label for="GSS-4">MIMEsweeper</label>
</li>
<li id="GSS-5-tree">
<input type="checkbox" name="GSS-5" id="GSS-5[]" value="GSS-ISATMG.docx">
<label for="GSS-5">MS ISA Server & Forefront TMG</label>
</li>
<li id="GSS-8-tree">
<input type="checkbox" name="GSS-8" id="GSS-8[]" value="GSS-ISATMG-CERT-FCB.docx">
<label for="GSS-8">MS ISA Server & Forefront TMG CERT-FCB</label>
</li>
<li id="GSS-9-tree">
<input type="checkbox" name="GSS-9" id="GSS-9[]" value="GSS-ISATMG-CERT-FCTK..docx">
<label for="GSS-5">MS ISA Server & Forefront TMG CERT-FCTK</label>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- Button (Double) -->
<div class="form-group">
<label class="col-md-4 control-label" for="generate">Confirm Slection</label>
<div class="col-md-8">
<button id="generate" name="generate" class="btn btn-primary">Generate File</button>
<button id="clearselection" name="clearselection" class="btn btn-inverse" type="reset">Reset Selection</button>
</div>
</div>
</fieldset>
</form>
<!-- Tree Code -->
<script>
$('input[type="checkbox"]').change(function(e) {
var checked = $(this).prop("checked"),
container = $(this).parent(),
siblings = container.siblings();
container.find('input[type="checkbox"]').prop({
indeterminate: false,
checked: checked
});
function checkSiblings(el) {
var parent = el.parent().parent(),
all = true;
el.siblings().each(function() {
return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
});
if (all && checked) {
parent.children('input[type="checkbox"]').prop({
indeterminate: false,
checked: checked
});
checkSiblings(parent);
} else if (all && !checked) {
parent.children('input[type="checkbox"]').prop("checked", checked);
parent.children('input[type="checkbox"]').prop("indeterminate", (parent.find('input[type="checkbox"]:checked').length > 0));
checkSiblings(parent);
} else {
el.parents("li").children('input[type="checkbox"]').prop({
indeterminate: true,
checked: true
});
}
}
checkSiblings(container);
});
</script>
<!-- Certified Button FULL CERT -->
<script>
function checkcert() {
var el = document.getElementById("type-0");
if (el.checked) {
$('#DSS-4-tree').show();
$("#DSS-3-tree").show();
$("#DSS-5-tree").show();
$("#DSS-6-tree").show();
$("#SSS-3-tree").show();
$("#SSS-5-tree").show();
$("#SSS-4-tree").show();
$("#SSS-6-tree").show();
$("#MSS-5-tree").show();
$("#MSS-6-tree").show();
$("#SSS-7-tree").show();
$("#MSS-8-tree").show();
$("#GSS-6-tree").show();
$("#GSS-7-tree").show();
$("#GSS-8-tree").show();
$("#GSS-9-tree").show();
}
else {
$("#DSS-4-tree").hide();
$("#DSS-3-tree").hide();
$("#DSS-5-tree").hide();
$("#DSS-6-tree").hide();
$("#SSS-3-tree").hide();
$("#SSS-5-tree").hide();
$("#SSS-4-tree").hide();
$("#SSS-6-tree").hide();
$("#MSS-5-tree").hide();
$("#MSS-6-tree").hide();
$("#SSS-7-tree").hide();
$("#MSS-8-tree").hide();
$("#GSS-6-tree").hide();
$("#GSS-7-tree").hide();
$("#GSS-8-tree").hide();
$("#GSS-9-tree").hide();
}
}
</script>
<!-- Certified Button CERT FCB -->
<script>
function checkcertFCB() {
var el = document.getElementById("type-3");
if (el.checked) {
$('#DSS-3-tree').show();
}
}
</script>
<!-- Certified Button CERT FCTK -->
<script>
function checkcertFCTK() {
var el = document.getElementById("type-4");
if (el.checked) {
$('#DSS-4-tree').show();
}
}
</script>
<!-- Non Certified Button -->
<script>
function checkcertNON() {
var el = document.getElementById("type-1");
if (el.checked) {
$('#MSS-3-tree').show();
}
}
</script>
<!-- Universal Radio Button Selection -->
<script>
function checkcertUNI() {
var el = document.getElementById("type-2");
if (el.checked)
$('#').show();
else
$('#').hide();
}
</script>
<!-- No Space Allowed in Input Text -->
<script>
$("input#filename").on({
keydown: function(e) {
if (e.which === 32)
return false;
},
change: function() {
this.value = this.value.replace(/\s/g, "");
}
});
</script>
</body>

this was a very big code to look at. it will take a long time if i go through what you have done. so i am gonna give you a idea how you can achieve what you want. for the following form
<form >
<label><input type="radio" name="aa" value="cert" />fcb FCTK</label>
<label><input type="radio" name="aa" value="certFCB" />fcb</label>
<label><input type="radio" name="aa" value="certFCTK" />FCTK</label>
<label><input type="radio" name="aa" value="non" />none</label>
<br />
<br />
<label class="all fcb"><input type="checkbox" name="chk[]" class="all fcb" />fcb 1</label><br />
<label class="all FCTK"><input type="checkbox" name="chk[]" />FCTK 1</label><br />
<label class="all fcb"><input type="checkbox" name="chk[]" />fcb 2</label><br />
<label class="all FCTK"><input type="checkbox" name="chk[]" />FCTK 2</label><br />
<label class="all fcb"><input type="checkbox" name="chk[]" />fcb 3</label><br />
<label class="all FCTK"><input type="checkbox" name="chk[]" />FCTK 3</label><br />
<label class="all fcb"><input type="checkbox" name="chk[]" />fcb 4</label><br />
</form>
JS
$('input[type="radio"]').change(function(e) {
$(".all").hide();
var a = $(this).val();
switch(a) {
case 'cert':
$(".fcb").show();
$(".FCTK").show();
break;
case 'certFCB':
$(".fcb").show();
break;
case 'certFCTK':
$(".FCTK").show();
break;
case 'non':
default:
$(".all").hide();
}
})
CSS
.all{
display:none;
}
this kind of solution you are looking for.
working jsfiddle link https://jsfiddle.net/vL423ncp/

Issue in multi select filter

I need to filter using multiselct ,data attribute . it is working but not as expected
here is my code
<ul>
<li>
<div class="sts">
<h1>filter 1</h1>
<div class="checkbox">
<label>
<input data-id="1" data-type="st" class="stat st" type="checkbox" />1
</label>
</div>
<div class="checkbox">
<label>
<input data-id="2" data-type="st" class="stat st" type="checkbox" />2
</label>
</div>
<div class="checkbox">
<label>
<input data-id="3" data-type="st" class="stat st" type="checkbox" />3
</label>
</div>
</div>
</li>
<li>
<h1>filter 2</h1>
<div class="ats">
<div class="checkbox">
<label>
<input data-id="foo" data-type="at" class="stat at" type="checkbox" />foo
</label>
</div>
<div class="checkbox">
<label>
<input data-id="boo" data-type="at" class="stat at" type="checkbox" />boo
</label>
</div>
<div class="checkbox">
<label>
<input data-id="bar" data-type="at" class="stat at" type="checkbox" />bar
</label>
</div>
</div>
</li>
<li>
<h1>filter 3</h1>
<div class="dpts">
<div class="checkbox">
<label>
<input data-id="a" data-type="dpt" class="stat dpt" type="checkbox" />a
</label>
</div>
<div class="checkbox">
<label>
<input data-id="b" data-type="dpt" class="stat dpt" type="checkbox" />b
</label>
</div>
<div class="checkbox">
<label>
<input data-id="c" data-type="dpt" class="stat dpt" type="checkbox" />c
</label>
</div>
<div class="checkbox">
<label>
<input data-id="d" data-type="dpt" class="stat dpt" type="checkbox" />d
</label>
</div>
</div>
</li>
</ul>
<ul class="list">
<li data-at="foo" data-st="1" data-dpt="a">asdw</li>
<li data-at="boo" data-st="2" data-dpt="c">qwedf</li>
<li data-at="boo" data-st="1" data-dpt="a">qwedf</li>
<li data-at="bar" data-st="3" data-dpt="b">tazxsw</li>
<li data-at="bar" data-st="1" data-dpt="b">zxcvb</li>
<li data-at="foo" data-st="1" data-dpt="b">poiuy</li>
<li data-at="boo" data-st="2" data-dpt="d">lkjhg</li>
<li data-at="boo" data-st="3" data-dpt="d">lkjhg</li>
</ul>
Here is my script
<script>
$('.stat').on('click', function() {
var $stats = $('.stat:checked');
var $items = $('.list li');
if ($stats.length == 0) {
$items.show();
return;
}
$items.hide();
$stats.each(function() {
var $stat = $(this);
$items.filter(function() {
return $(this).data($stat.data('type')) == $stat.data('id');
}).show();
})
});
</script>
If i select any one from each fliter it is working fine , but when i select from same filter it should perform logical OR but it is performing logical AND.
Here is the fiddler lik

I'm struggling with this same problem as durai. I updated the fiddle, please make selections as instructed at the top of the page and you'll see the problematic case.
<ul class="list">
<li data-at="foo" data-st="1" data-dpt="a">asdw</li>
<li data-at="boo" data-st="3" data-dpt="c">qwedf</li>
<li data-at="boo" data-st="1" data-dpt="a">qwedf</li>
<li data-at="bar" data-st="3" data-dpt="a">this should be visible (when filters: 3 | bar | a&b)</li>
<li data-at="bar" data-st="2" data-dpt="b">zxcvb</li>
<li data-at="foo" data-st="1" data-dpt="b">poiuy</li>
<li data-at="boo" data-st="2" data-dpt="d">lkjhg</li>
<li data-at="bar" data-st="3" data-dpt="b">this should be visible (when filters: 3 | bar | a&b)</li>

How to deselect Particular value in Bootstrap mutiselect JS?

How to deselect particular value in boostarp multiselect Js?I want to deselect Any option when user Click All Options it will select All options it's working fine,But When Click All option Any option do unchecked.
Below My Coding.
<ul class="multiselect-container dropdown-menu">
<li class="multiselect-item multiselect-all">
<a href="javascript:void(0);" class="multiselect-all">
<label class="checkbox">
<input type="checkbox" name="multiselect" value="multiselect-all">
Select all
</label>
</a>
</li>
<li>
<a href="javascript:void(0);">
<label class="checkbox">
<input type="checkbox" name="multiselect" value="cheese">
Cheese
</label>
</a>
</li>
<li class="multiselect-item multiselect-all">
<a href="javascript:void(0);" class="multiselect-all">
<label class="checkbox">
<input type="checkbox" name="multiselect" value="multiselect-all">
Any
</label>
</a>
</li>
<li class="multiselect-item multiselect-all">
<a href="javascript:void(0);" class="multiselect-all">
<label class="checkbox">
<input type="checkbox" name="multiselect" value="multiselect-all">
Pizza
</label>
</a>
</li>

Checking a checkbox using jquery from another div using prop()

I don't know why this is not working. I tried the same way as seen in some of the stackflow solutions but still not getting the image as well as the checkbox response.
<form>
<div class="col s12">
<div style="display:none">
<label for="Type">Type</label>
<input type="hidden" id="Type">
<div class="checkbox">
<input type="checkbox" id="Type1" checked="false" name="Type[]" value="1">
<label for="Type1">Fruits</label>
</div>
<div class="checkbox">
<input type="checkbox" id="Type2" checked="false" name="Type[]" value="2">
<label for="Type2">Vegetables</label>
</div>
<div class="checkbox">
<input type="checkbox" id="Type3" checked="false" name="Type[]" value="3">
<label for="Type3">Pulses</label>
</div>
<div class="checkbox">
<input type="checkbox" id="Type4" checked="false" name="Type[]" value="4">
<label for="Type4">SeaFoods</label>
</div>
</div>
<p>Food types</p>
<ul>
<li class="unchkd"><span class="food-icons fruit"></span> <span class="iconname">Fruits</span></li>
<li class="unchkd"><span class="food-icons vegi"></span> <span class="iconname">Vegetables</span></li>
<li class="unchkd"><span class="food-icons pulses"></span> <span class="iconname">Pulses</span></li>
<li class="unchkd"><span class="food-icons seaFood"></span> <span class="iconname">Sea Food</span></li>
</ul>
</div>
</div>
</form
JQuery for this:
$(document).ready(function(){
$("span.food-icons.fruit").click(function(){
if($(".checkbox #Type1").prop("checked") == false){
$('.checkbox #Type1').prop('checked', true);
$("span.food-icons.fruit").css("background-image", "url(images/icons/fruits1.png)";
}
else{
$('.checkbox #Type1').prop('checked', false);
$("span.food-icons.fruit").css("background-image", "url(images/icons/fruits.png)";
}
});
});

Your clicking span.iconname not span.food-icons. wrap .iconname in .food-icons
You are also missing a closing bracket on you $.css selector.
$(document).ready(function(){
$(".food-icons.fruit>.iconname").click(function(){
console.log("click");
if($(".checkbox #Type1").prop("checked") == false){
$('.checkbox #Type1').prop('checked', true);
$("span.food-icons.fruit").css("background-image", "url(images/icons/fruits1.png)");
}
else{
$('.checkbox #Type1').prop('checked', false);
$("span.food-icons.fruit").css("background-image", "url(images/icons/fruits.png)");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col s12">
<div style="display:inherit">
<label for="Type">Type</label>
<input type="hidden" id="Type">
<div class="checkbox">
<input type="checkbox" id="Type1" checked="false" name="Type[]" value="1">
<label for="Type1">Fruits</label>
</div>
<div class="checkbox">
<input type="checkbox" id="Type2" checked="false" name="Type[]" value="2">
<label for="Type2">Vegetables</label>
</div>
<div class="checkbox">
<input type="checkbox" id="Type3" checked="false" name="Type[]" value="3">
<label for="Type3">Pulses</label>
</div>
<div class="checkbox">
<input type="checkbox" id="Type4" checked="false" name="Type[]" value="4">
<label for="Type4">SeaFoods</label>
</div>
</div>
<p>Food types</p>
<ul>
<li class="unchkd"><span class="food-icons fruit"> <span class="iconname">Fruits</span></span></li>
<li class="unchkd"><span class="food-icons vegi"></span> <span class="iconname">Vegetables</span></li>
<li class="unchkd"><span class="food-icons pulses"></span> <span class="iconname">Pulses</span></li>
<li class="unchkd"><span class="food-icons seaFood"></span> <span class="iconname">Sea Food</span></li>
</ul>
</div>
</div>