We Keep Coding

how to store values of list items in array on check box click and remove on unclick

I am working on a quote page where the user can click on features which will be in the form text field and the user can also request a quote
here is what I did so far
<div class="buy-features-box">
<div class="box-head">
<div class="box-head-content">
<div class="package-name">
<h2>Sample features for Seller/ Vendor</h2>
</div>
<div class="select-all-btn">
<input class="btn-check check1 form-check-input" name="product" value="100" type="checkbox" onclick="totalIt()">
SELECT ALL
</div>
</div>
<div class="collapse-opener collapsed" data-toggle="collapse" data-target="#features3" aria-expanded="true" aria-controls="features3">
<i class="fas fa-plus"></i>
</div>
</div>
<div id="features3" class="collapse" aria-labelledby="features3" data-parent="#accordion1">
<div class="box-body">
<div class="features-detail">
<div class="features-list">
<ul>
<li>
<div class="features-item">
<div class="features-checkbox">
<label class="custom-checkbox">
<input class="form-check-input ch2" name="product" value="0" type="checkbox" onclick="totalIt()" disabled>
<span class="checkmark"></span>
</label>
</div>
<div class="features-content">
<h3>Vendors Dashboard</h3>
<p>(Manage profile and password)</p>
</div>
</div>
</li>
<li>
<div class="features-item">
<div class="features-checkbox">
<label class="custom-checkbox">
<input class="form-check-input ch2" name="product" value="0" type="checkbox" onclick="totalIt()" disabled>
<span class="checkmark"></span>
</label>
</div>
<div class="features-content">
<h3>List products</h3>
<p>(View list of products)</p>
</div>
</div>
</li>
<li>
<div class="features-item">
<div class="features-checkbox">
<label class="custom-checkbox">
<input class="form-check-input ch2" name="product" value="0" type="checkbox" onclick="totalIt()" disabled>
<span class="checkmark"></span>
</label>
</div>
<div class="features-content">
<h3>Add/ edit product page</h3>
<p>(without product variations)</p>
</div>
</div>
</li>
<li>
<div class="features-item">
<div class="features-checkbox">
<label class="custom-checkbox">
<input class="form-check-input ch2" name="product" value="0" type="checkbox" onclick="totalIt()" disabled>
<span class="checkmark"></span>
</label>
</div>
<div class="features-content">
<h3>Add/ edit product page</h3>
<p>(with product variations and attribute management)</p>
</div>
</div>
</li>
<li>
<div class="features-item">
<div class="features-checkbox">
<label class="custom-checkbox">
<input class="form-check-input ch2" name="product" value="0" type="checkbox" onclick="totalIt()" disabled>
<span class="checkmark"></span>
</label>
</div>
<div class="features-content">
<h3>Payment reports</h3>
<p>(With date filter)</p>
</div>
</div>
</li>
<li>
<div class="features-item">
<div class="features-checkbox">
<label class="custom-checkbox">
<input class="form-check-input ch2" name="product" value="0" type="checkbox" onclick="totalIt()" disabled>
<span class="checkmark"></span>
</label>
</div>
<div class="features-content">
<h3>Order history</h3>
<p>(View order history of products)</p>
</div>
</div>
</li>
<li>
<div class="features-item">
<div class="features-checkbox">
<label class="custom-checkbox">
<input class="form-check-input ch2" name="product" value="0" type="checkbox" onclick="totalIt()" disabled>
<span class="checkmark"></span>
</label>
</div>
<div class="features-content">
<h3>Order tracking</h3>
<p>(Track individual order via tracking number/ API)</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
here is my jquery code:
<script type="text/javascript">
$(".form-check-input").change(function() {
var abc = []; //move the array to here
$('li input[type="checkbox"]:checked').each(function() {
var $row = $(this).closest('li');
$('h3', $row).each(function(i) {
abc.push($(this).text());
})
document.getElementById("features").value = abc.join(',');
});
});
$('input:checkbox').change(function() {
var total = 0;
$('input:checkbox:checked').each(function() { // iterate through each checked element.
total += isNaN(parseInt($(this).val())) ? 0 : parseInt($(this).val());
});
$("#total").val("$" + total.toFixed(2));
});
</script>
now here I am getting values and showing them correctly in the input box of the form but if the user unchecks certain features they are not getting removed from the input field
basically I am storing values in the array "abc" on checkbox checked property but not able to remove on uncheck them.

If you move document.getElementById("features").value = abc.join(','); out of your li .each() function, then everything seems to work just fine.
Problem is that you are only updating the value of the input if there is a checked input.
Demo
$(".form-check-input").change(function() {
var abc = []; //move the array to here
$('li input[type="checkbox"]:checked').each(function() {
var $row = $(this).closest('li');
$('h3', $row).each(function(i) {
abc.push($(this).text());
})
});
document.getElementById("features").value = abc.join(',');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<div class="features-item">
<div class="features-checkbox">
<label class="custom-checkbox">
<input class="form-check-input ch2" name="product" value="0" type="checkbox"/>
<span class="checkmark"></span>
</label>
</div>
<div class="features-content">
<h3>Order history</h3>
<p>(View order history of products)</p>
</div>
</div>
</li>
<li>
<div class="features-item">
<div class="features-checkbox">
<label class="custom-checkbox">
<input class="form-check-input ch2" name="product" value="0" type="checkbox"/>
<span class="checkmark"></span>
</label>
</div>
<div class="features-content">
<h3>Order history2</h3>
<p>(View order history of products)</p>
</div>
</div>
</li>
</ul>
<input id="features" />

filter item with checked checkbox

I just want to make a filter with checkbox array using jquery and javascript. It works fine when only one checkbox is selected but when I select two or more checkboxes it doesn't show all the divs. Could you please help me to find my mistake.
I want to filter through the filter array. The name of our array is FlyList
let FlyList = [
{
id: "1",
Airline_number: "961",
Type_ticket: "systemi",
Airline: "dubai",
fly_time: "04:00-08:00",
Class_type: "Economical"
},
{
id: "2",
Airline_number: "962",
Type_ticket: "charteri",
Airline: "frans",
fly_time: "08:00-11:00",
Class_type: "Commercial"
},
{
id: "3",
Airline_number: "963",
Type_ticket: "systemi",
Airline: "Emirates",
fly_time: "11:00-14:00",
Class_type: "Commercial"
},
{
id: "4",
Airline_number: "964",
Type_ticket: "systemi",
Airline: "Emirates",
fly_time: "14:00-17:00",
Class_type: "Economical"
},
{
id: "5",
Airline_number: "965",
Type_ticket: "charteri",
Airline: "dubai",
fly_time: "17:00-21:00",
Class_type: "Commercial"
},
{
id: "6",
Airline_number: "966",
Type_ticket: "charteri",
Airline: "frans",
fly_time: "21:00-24:00",
Class_type: "Economical"
}
];
function customFilter(list, field, value) {
let fill = list.filter(item => {
if (typeof filter === "object") {
value.forEach(val => {
return item[field] === value;
});
}
});
console.log(fill);
}
let filterCheckbox = document.querySelector(".customCheck");
filterCheckbox.addEventListener("change", e => {
e.preventDefault();
// jquery
// var field = $(this).parents('.filter_type').attr('data-field');
let field = document.querySelector(".filter_type").getAttribute("data-field");
// jquery
let val = e.target.value;
customFilter(FlyList, field, val);
// console.log(val);
});
<!-- begin snippet: js hide: false console: true babel: false -->
<div class="filters">
<div class="collapse show" id="collapseFilters">
<div class="filter_type" data-field="Type_ticket">
<h6>
Type of ticket
<div class="switcher float-left ">
<label class="customToggle small">
<input type="checkbox" name="" id="" class="selectall" />
all Type of ticket
<div class="indicator"></div>
</label>
</div>
</h6>
<ul>
<li>
<label class="customCheck w-100 " id="filter-check">
<input type="checkbox" name="" value="systemi" class="individual" />
systemi
<div class="indicator"></div>
</label>
</li>
<li>
<label class="customCheck w-100" id="filter-check2">
<input
type="checkbox"
name=""
value="charteri"
class="individual"
/>
charteri
<div class="indicator"></div>
</label>
</li>
</ul>
</div>
<div class="filter_type airlineSelection" data-field="Airline">
<h6>
airline
<div class="switcher float-left">
<label class="customToggle small">
<input type="checkbox" name="" id="" />
all airline
<div class="indicator"></div>
</label>
</div>
</h6>
<ul>
<li>
<label class="customCheck" id="">
<input type="checkbox" value="frans" name="inlineRadioOptions" />
frans
<div class="indicator"></div>
</label>
</li>
<li>
<label class="customCheck">
<input type="checkbox" name="inlineRadioOptions" /> dubai
<div class="indicator"></div>
</label>
</li>
<li>
<label class="customCheck">
<input type="checkbox" value="emirates" name="inlineRadioOptions" />
emirates
<div class="indicator"></div>
</label>
</li>
<li>
<label class="customCheck">
<input type="checkbox" value="frans" name="inlineRadioOptions" />
frans
<div class="indicator"></div>
</label>
</li>
<li>
<label class="customCheck">
<input type="checkbox" value="emirates" name="inlineRadioOptions" />
emirates
<div class="indicator"></div>
</label>
</li>
<li>
<label class="customCheck">
<input type="checkbox" value="dubai" name="inlineRadioOptions" />
dubai
<div class="indicator"></div>
</label>
</li>
</ul>
</div>
<div class="filter_type" data-field="Class_type">
<h6>
Class_type
<div class="switcher float-left">
<label class="customToggle small">
<input type="checkbox" name="" id="" />
all Class_type
<div class="indicator"></div>
</label>
</div>
</h6>
<ul>
<li>
<label class="customCheck" id="">
<input
type="checkbox"
value="economical"
name="inlineRadioOptions"
/>
economical
<div class="indicator"></div>
</label>
</li>
<li>
<label class="customCheck">
<input
type="checkbox"
value="commercial"
name="inlineRadioOptions"
/>
commercial
<div class="indicator"></div>
</label>
</li>
</ul>
</div>
<div class="filter_type" data-field="fly_time">
<h6>
fly_time
<div class="switcher float-left">
<label class="customToggle small">
<input type="checkbox" name="" id="" />
all fly_time
<div class="indicator"></div>
</label>
</div>
</h6>
<ul>
<li>
<label class="customCheck" id="">
<input
type="checkbox"
value="04:00-08:00"
name="inlineRadioOptions"
/>
04:00-08:00
<div class="indicator"></div>
</label>
</li>
<li>
<label class="customCheck">
<input
type="checkbox"
value="08:00-11:00"
name="inlineRadioOptions"
/>
08:00-11:00
<div class="indicator"></div>
</label>
</li>
<li>
<label class="customCheck">
<input
type="checkbox"
value="11:00-14:00"
name="inlineRadioOptions"
/>
11:00-14:00
<div class="indicator"></div>
</label>
</li>
<li>
<label class="customCheck">
<input
type="checkbox"
value="14:00-17:00"
name="inlineRadioOptions"
/>
14:00-17:00
<div class="indicator"></div>
</label>
</li>
<li>
<label class="customCheck">
<input
type="checkbox"
value="17:00-21:00"
name="inlineRadioOptions"
/>
17:00-21:00
<div class="indicator"></div>
</label>
</li>
<li>
<label class="customCheck">
<input
type="checkbox"
value="21:00-24:00"
name="inlineRadioOptions"
/>
21:00-24:00
<div class="indicator"></div>
</label>
</li>
</ul>
</div>
</div>
</div>

With querySelector you select only one element. That's why you add an event listener to only first .customCheck checkbox.
You need to have an event listener attached to all the checkboxes. To do so you can use querySelectorAll instead of querySelector and then attach an event to each input:
let filterCheckboxes = document.querySelectorAll('.customCheck');
filterCheckboxes.forEach(checkbox => checkbox.addEventListener('change' , (e) => {
console.log(e);
// filtering goes here
}))

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/

During onclick event of radio button, hide the validation and check the another radio value to go to next div class using jquery

I have two radio buttons one is Enter your own sizes and another one is Choose your standard size. I have first checked the enter your own sizes. If i click next the jquery validation is working fine, but I am clicking the enter your standard sizes radio button only. Click the bed type and dimension go to next div it asking the first enter your sizes. If i click the radio only check one function and get in to the next div.
<html>
<style>
.dimension
{
display: none;
}
.radio-buttons
{
display:none;
}
input[type=radio] + label
{
display:inline-block;
padding: 4px 12px;
border: 1px solid #ccc;
background-color: #f5f5f5;
font-size: 14px;
line-height: 20px;
color: #333;
}
input[type=radio]:checked + label
{
background-image: none;
background-color:red;
}
</style>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body> <form id="samplecode" name="samplecode" method="POST" action="">
<div id='div1'>
<div class="col-md-12" >
<div class='row'>
<div class="col-md-7 step-function">
<div class="form-group ">
<label class="one-step" >Step Three:Choose Dimension</label>
</div>
<div class="col-md-12">
<label class="radio-inline btn-radio"><input type="radio" name="size" value="v" >Choose From Standard Size</label>
<label class="radio-inline btn-radio"> <input type="radio" name="size" checked="checked" value="s"/>Enter Your Own Size</label>
</div>
<!-- enter your own size -->
<div class='row desc' id="sizes" >
<div class="col-md-12">
<label class="own-size">Your Own sizes(in Inches)</label>
</div>
<form id="lengthform" name="samplecode" method="POST">
<div class="col-md-12 ">
<div class="form-group col-md-6 col-lg-3"><input type="text" name="length" id="length" class="form-control len-class" Placeholder='Length'></div>
<div class="form-group col-md-6 col-lg-3 "> <input type="text" name="breadth" id="breadth" class="form-control len-class" Placeholder='Breadth'></div>
</div>
</form>
<div class="col-md-12 ">
<label class="not-sure-matters" >Not sure how to measure your mattress?</label>
</div>
<div class="col-md-12 ">
<a href='#' class='link-find-out'>Click here to find out</a>
</div>
</div>
<!-- END your own size -->
<!-- enter your Standard size -->
<div class='row desc' id="sizev" style='Display:none;' >
<div class="col-md-12">
<label class="own-size">Bed Type</label>
<div class='custom-btn-grp'>
<div class="bed_type">
<ul class="nav nav-pills">
<li>
<input type="radio" id="b1" name="radios" class="radio-buttons bed-di-btn" value="Single" checked >
<label for="b1">Single</label>
</li>
<li>
<input type="radio" id="b2" name="radios" class="radio-buttons bed-di-btn" value="Double" >
<label for="b2">Double(Twin)</label>
</li>
<li>
<input type="radio" id="b3" name="radios" class="radio-buttons bed-di-btn" value="Queen" >
<label for="b3">Queen</label>
</li>
<li>
<input type="radio" id="b4" name="radios" class="radio-buttons bed-di-btn" value="King" >
<label for="b4">King</label>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-12">
<label class="own-size">Dimension</label>
<div class='custom-btn-grp dimension-group'>
<div class ="dimension" id="d1">
<ul class="nav nav-pills">
<li>
<input type="radio" id="single1" class="radio-buttons bed-di-btn" name="single" value="1000s" >
<label for="single1">72x30</label>
</li>
<li>
<input type="radio" id="single2" class="radio-buttons bed-di-btn" name="single" checked value="2000s" >
<label for="single2">72x36 </label>
</li>
<li>
<input type="radio" id="single3" class="radio-buttons bed-di-btn" name="single" value="3000s" >
<label for="single3">75x36</label>
</li>
<li>
<input type="radio" id="single4" class="radio-buttons bed-di-btn" name="single" value="4000s" >
<label for="single4">78x36</label>
</li>
<li>
<input type="radio" id="single5" class="radio-buttons bed-di-btn" name="single" value="5000s" >
<label for="single5">84x36</label>
</li>
</ul>
</div>
<div class ="dimension" id="d2">
<ul class="nav nav-pills">
<li>
<input type="radio" id="doubles1" class="radio-buttons" name="doubles" checked value="1000d" >
<label for="doubles1">72x48</label>
</li>
<li>
<input type="radio" id="doubles2" class="radio-buttons" name="doubles" value="2000d" >
<label for="doubles2">75x48</label>
</li>
<li>
<input type="radio" id="doubles3" class="radio-buttons" name="doubles" value="3000d" >
<label for="doubles3">78x48</label>
</li>
<li>
<input type="radio" id="doubles4" class="radio-buttons" name="doubles" value="4000d" >
<label for="doubles4">84x48</label>
</li>
</ul>
</div>
<div class ="dimension" id="d3">
<ul class="nav nav-pills">
<li>
<input type="radio" id="queen1" class="radio-buttons" name="queen" checked value="1000q" >
<label for="queen1">72x60</label>
</li>
<li>
<input type="radio" id="queen2" class="radio-buttons" name="queen" value="2000q" >
<label for="queen2">75x60</label>
</li>
<li>
<input type="radio" id="queen3" class="radio-buttons" name="queen" value="3000q">
<label for="queen3">78x60</label>
</li>
<li>
<input type="radio" id="queen4" class="radio-buttons" name="queen" value="4000q">
<label for="queen4">84x60</label>
</li>
</ul>
</div>
<div class ="dimension" id="d4">
<ul class="nav nav-pills">
<li>
<input type="radio" id="king1" class="radio-buttons" name="king" checked value="1000k" >
<label for="king1">72x72</label>
</li>
<li>
<input type="radio" id="king2" class="radio-buttons" name="king" value="2000k" >
<label for="king2">75x72</label>
</li>
<li>
<input type="radio" id="king3" class="radio-buttons" name="king" value="3000k" >
<label for="king3">78x72</label>
</li>
<li>
<input type="radio" id="king4" class="radio-buttons" name="king" value="4000k" >
<label for="king4">84x72</label>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-12 "><label class="not-sure-matters" >Not sure how to measure your mattress?</label></div>
<div class="col-md-12 "><a href='#' class='link-find-out'>Click here to find out</a></div>
</div>
<!-- End standard sizes -->
</div>
<div class='row'>
<div class="col-md-5">
<img class="cust-image-size" src='img/cust.jpg'>
</div>
</div>
</div>
</div>
<div class='col-md-7'>
<div class='pull-right'>
<a href='#' id='summer5' class='next-color'>Next &#10095❯</a>
</div>
<div class=' pull-left' >
<a href='#Pre' id='summer4' class='next-color'><span>&#10094❮</span>Previous </a>
</div>
</div>
</div>
</form>
<div id="div2" style="display:none;">HI You successfully reached the solution</div>
</body>
// Jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#samplecode').validate({
rules: {
length: {
required: true,
number: true,
range: [72, 84]
},
breadth: {
required: true,
number: true,
range: [72, 84]
}
},
messages: {
length: {
required: 'Please select a template'
},
breadth: {
required: 'Please select a template'
}
},
submitHandler: function(){
$('div[id ^=div]').hide();
$("#div2").show();
return false;
}
});
$("#summer5").click(function() {
$("#samplecode").submit();
});
$("#length").change(function(){
var length =$(this).val();
$("#breadth").change(function(){
var breadth =$(this).val();
var result =length.concat(breadth);
alert(result);
});
});
$("input[name$='size']").click(function() {
var test = $(this).val();
//alert(test);
$("div.desc").hide();
$("#size" + test).show();
});
$(window).load(function()
{
$('.dimension').hide();
$('#d1').show();
document.getElementById("demo").innerHTML ="₨ " + 1000;
});
$('.bed_type ul li ').click(function()
{
var i = $(this).index();
$('.dimension').hide();
$('#d' + (i+1)).show();
var type ='b' + (i+1);
document.getElementById(type).addEventListener("click", bedtype);
});
});
</script>
</html>

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>