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

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>

Related

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" />

Why I am getting 'querySelector' of null ? What I'm doing wrong in this code?

I have implemented code on magnolia cms, the task is to get the form values in another hidden form (from Marketo). The code works fine in the Magnolia community edition but not in a production environment. Kindly help with the code. What's wrong here?
The HTML for the Magnolia Webform :
<form id="commandDEmarketo_test" class="webtrekkHelper_configs eineSeite" data-webtrekk-forminstall="true" data-mwf-target="/formulare/servlet/form;webforms=A0FE63A9C0A3C637292A391D2D5F6662?_uid=DEmarketo_test&lang=de_DE&_view=webform" data-webtrekk-temp-append-base-contentid="." data-mwf-id="DEmarketo_test" action="/formulare/servlet/form;webforms=A0FE63A9C0A3C637292A391D2D5F6662" method="post" enctype="multipart/form-data" accept-charset="utf-8" onsubmit="return false;" data-mktorelay-formid="1038">
<input type="hidden" name="audience" value="UIP">
<input type="hidden" name="revisionNr" value="24593">
<input type="hidden" name="formRevisionNr" value="23509">
<input type="hidden" name="wt_form" value="1">
<input type="hidden" name="_mwfToken:DEmarketo_test" value="D4486376922829AE0BA1C3BA5F935941">
<div id="form-top"></div>
<ul id="crumbs">
<li class="selected ">
<a href="#" style="height: 0px; padding-right: 0px;">
<div>
<span> </span>
</div>
</a>
</li>
<li class="last-child">
<a href="#" style="height: 0px; padding-right: 0px;">
<div>
<span>
Success
</span>
</div>
</a>
</li>
</ul>
<div class="innerForm">
<ul class="">
<div class="">
<li data-mwf-container="mwf0301fe8ca93a" class="mwf-field
mwf-bold
mwf-italic
h-odd">
<script>
var d = document.getElementById("commandDEmarketo_test");
d.setAttribute("data-mktorelay-formid", "1038");
</script>
</li>
</div>
<div class=" none">
<li data-mwf-container="mwf23e481e7bdc0" class="mwf-field h-even">
<label class="mwf-label" for="mwf23e481e7bdc0">
Vorname
</label>
<div class="mwf-input">
<input id="mwf23e481e7bdc0" name="vorname" class="mwf-text " data-mwf-id="mwf23e481e7bdc0" type="text" value="">
<p class="mwf-error"></p>
</div>
</li>
</div>
<div class=" none">
<li data-mwf-container="mwf08d9bc1fbf81" class="mwf-field h-odd">
<label class="mwf-label" for="mwf08d9bc1fbf81">
Nachname
</label>
<div class="mwf-input">
<input id="mwf08d9bc1fbf81" name="nachname" class="mwf-text " data-mwf-id="mwf08d9bc1fbf81" type="text" value="">
<p class="mwf-error"></p>
</div>
</li>
</div>
<div class="">
<input id="versteckt" name="versteckt" data-mwf-id="mwf4531354a7b12" type="hidden" value="">
</div>
<div class="">
<li data-mwf-container="mwf568b7206cb24" class="mwf-field ">
<label class="mwf-label">
Radio
</label>
<div class="mwf-input">
<fieldset data-mwf-fieldset="mwf568b7206cb24">
<span class="mwf-option"> <input id="mwf568b7206cb24_A" name="radio" class="mwf-radio" data-mwf-id="mwf568b7206cb24" type="radio" value="A">
<label for="mwf568b7206cb24_A">Option a</label>
<div class="clearfix"></div>
</span>
<span class="mwf-option"> <input id="mwf568b7206cb24_B" name="radio" class="mwf-radio" data-mwf-id="mwf568b7206cb24" type="radio" value="B">
<label for="mwf568b7206cb24_B">Option 2</label>
<div class="clearfix"></div>
</span>
</fieldset>
<p class="mwf-error"></p>
</div>
</li>
</div>
<div class="">
<li data-mwf-container="mwf0364ecee4a3f" class="mwf-field h-even">
<label class="mwf-label" for="mwf0364ecee4a3f">
Dropdown
</label>
<div class="mwf-input">
<select id="mwf0364ecee4a3f" name="dropdown" class="mwf-select mwf-multiple " data-mwf-id="mwf0364ecee4a3f">
<option id="mwf1eb0a105558d_DEmarketo_test" value="1">erster Wert</option>
<option id="mwf8dce584a8bef_DEmarketo_test" value="2">zweiter Wert </option>
</select>
<p class="mwf-error"></p>
</div>
</li>
</div>
</ul>
<ul>
<li data-mwf-container="_finish_mwfdf9ed4d75291" class="mwf-button mwf-next">
<input type="button" value="Submit" data-mwf-submit="{"type":"finish"}" class="webtrekkHelper_observe" data-webtrekk-formsubmit="" data-webtrekk-linkid-area="Content" data-webtrekk-linkid-element="Button" data-webtrekk-linkid-name="Submit" data-webtrekk-linkid-target-append-base-contentid=".Success">
</li>
</ul>
<ul>
<li class="mwf-pager">
<p>
<span>1</span>/<span>2</span>
</p>
</li>
</ul>
</div>
</form>
The Script I am running is,
<script>
MktoForms2.loadForm("https://app-lonXX.marketo.com", "162-XXX-XXX", 10XX);
var customForm = document.querySelector("#commandDEsk2_form"),
customFormButton = customForm.querySelector("input[type='button']");
if (customFormButton!= null) {
customFormButton.addEventListener("click",function(customFormSubmitEvent){
customFormSubmitEvent.preventDefault();
customFormButton.disabled = true;
MktoForms2.whenReady(function(mktoForm) {
mktoForm.addHiddenFields({
"FirstName": customForm.querySelector("#mwf23e481e7bdc0").value,
"LastName": customForm.querySelector("#mwf08d9bc1fbf81").value
});
mktoForm.submit();
});
});
}
</script>
Error :
Uncaught TypeError: Cannot read property 'querySelector' of null

Select all in checkbox at the same time with multiple select all

Can I ask how to code a "select all" in a checkbox at the same time with multiple select all?
$(document).ready(function() {
$('.allcheckboxes').click(function() {
$(this).next().parent().parent().parent().toggleClass('checkallbox');
if($('#selectall_wrapper').hasClass('checkallbox')) {
$('#selectall_wrapper input[type="checkbox"]').prop('checked', true);
} else {
$('#selectall_wrapper input[type="checkbox"]').prop('checked', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="selectall_wrapper">
<li>
<div class="form-group">
<input id="checkedall" class="allcheckboxes" type="checkbox">
<label for="checkedall">Select all services</label>
</div>
</li>
<li>
<div class="form-group">
<input id="checkbox1" type="checkbox">
<label for="checkbox1">Service 1</label>
</div>
</li>
<li>
<div class="form-group">
<input id="checkbox2" type="checkbox">
<label for="checkbox2">Service 2</label>
</div>
</li>
<li>
<div class="form-group">
<input id="checkbox3" type="checkbox">
<label for="checkbox3">Service 3</label>
</div>
</li>
</ul>
<ul id="selectall_wrapper">
<li>
<div class="form-group">
<input id="checkedall" class="allcheckboxes" type="checkbox">
<label for="checkedall">Select all products</label>
</div>
</li>
<li>
<div class="form-group">
<input id="checkbox1" type="checkbox">
<label for="checkbox1">product 1</label>
</div>
</li>
<li>
<div class="form-group">
<input id="checkbox2" type="checkbox">
<label for="checkbox2">product 2</label>
</div>
</li>
<li>
<div class="form-group">
<input id="checkbox3" type="checkbox">
<label for="checkbox3">product 3</label>
</div>
</li>
</ul>

Using your code, you can use another wrapper and add that to your function. (this could be cleaned up and greatly simplified, but you get the idea.)
$(document).ready(function() {
$('.allcheckboxes').click(function() {
$(this).next().parent().parent().parent().toggleClass('checkallbox');
if($('#selectall_wrapper').hasClass('checkallbox')) {
$('#selectall_wrapper input[type="checkbox"]').prop('checked', true);
} else{
$('#selectall_wrapper input[type="checkbox"]').prop('checked', false);
} if($('#selectall_wrapper_2').hasClass('checkallbox')) {
$('#selectall_wrapper_2 input[type="checkbox"]').prop('checked', true);
} else {
$('#selectall_wrapper_2 input[type="checkbox"]').prop('checked', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="selectall_wrapper">
<li>
<div class="form-group">
<input id="checkedall" class="allcheckboxes" type="checkbox">
<label for="checkedall">Select all services</label>
</div>
</li>
<li>
<div class="form-group">
<input id="checkbox1" type="checkbox">
<label for="checkbox1">Service 1</label>
</div>
</li>
<li>
<div class="form-group">
<input id="checkbox2" type="checkbox">
<label for="checkbox2">Service 2</label>
</div>
</li>
<li>
<div class="form-group">
<input id="checkbox3" type="checkbox">
<label for="checkbox3">Service 3</label>
</div>
</li>
</ul>
<ul id="selectall_wrapper_2">
<li>
<div class="form-group">
<input id="checkedall_2" class="allcheckboxes" type="checkbox">
<label for="checkedall_2">Select all products</label>
</div>
</li>
<li>
<div class="form-group">
<input id="checkbox1" type="checkbox">
<label for="checkbox1">product 1</label>
</div>
</li>
<li>
<div class="form-group">
<input id="checkbox2" type="checkbox">
<label for="checkbox2">product 2</label>
</div>
</li>
<li>
<div class="form-group">
<input id="checkbox3" type="checkbox">
<label for="checkbox3">product 3</label>
</div>
</li>
</ul>

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/

jQuery check checkbox is not working with second time

I have html with anchors and checkboxs. Now When user select to anchor, I want to check checkbox to closest anchor.
For example, If I click to Travel anchor Travel checkbox need to be checked and then I click to Kids anchor Kids checkbox need to be checked and add/remove active class from anchor.
In my example it is working with only first anchor selection, when you select any other anchor it will not work and not select any checkbox.
Here is my JSFiddle: http://jsfiddle.net/zaarwejy/1/
<div class="row instagram-details">
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Sports
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Health & Fitness
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Photography
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Entertainment
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Food
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Travel
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Lifestyle
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Automotive
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Fashion
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Beauty
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Youth
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Technology
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Weddings
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Adventure
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Luxury
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Tattoos
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Provocative
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Pets
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Kids
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Architecture
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Art & Design
</div>
</div>
and jQuery code:
$(".instagram-details a").click(function () {
var ele = $(this).closest('a').find(':checkbox');
if ($(':checked').length) {
ele.prop('checked', false);
$(this).removeClass('active');
} else {
ele.prop('checked', true);
$(this).addClass('active');
}
});

Instead of that, you can just use <label>:
$(function() {
$("input:checkbox").click(function() {
if (this.checked)
$(this).closest("label").addClass("active");
else
$(this).closest("label").removeClass("active");
});
});
label.active {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row instagram-details">
<div class="col-md-2">
<label class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Sports</label>
</div>
<div class="col-md-2">
<label>
<input type="checkbox" id="" class="industrie_branch_option" value="">Health & Fitness</label>
</div>
<div class="col-md-2">
<label>
<input type="checkbox" id="" class="industrie_branch_option" value="">Photography</label>
</div>
<div class="col-md-2">
<label>
<input type="checkbox" id="" class="industrie_branch_option" value="">Entertainment</label>
</div>
<div class="col-md-2">
<label>
<input type="checkbox" id="" class="industrie_branch_option" value="">Food</label>
</div>
<div class="col-md-2">
<label class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Travel</label>
</div>
<div class="col-md-2">
<label>
<input type="checkbox" id="" class="industrie_branch_option" value="">Lifestyle</label>
</div>
<div class="col-md-2">
<label>
<input type="checkbox" id="" class="industrie_branch_option" value="">Automotive</label>
</div>
<div class="col-md-2">
<label class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Fashion</label>
</div>
<div class="col-md-2">
<label>
<input type="checkbox" id="" class="industrie_branch_option" value="">Beauty</label>
</div>
<div class="col-md-2">
<label class="active">
<input type="checkbox" id="" class="industrie_branch_option" value="">Youth</label>
</div>
<div class="col-md-2">
<label class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Technology</label>
</div>
<div class="col-md-2">
<label>
<input type="checkbox" id="" class="industrie_branch_option" value="">Weddings</label>
</div>
<div class="col-md-2">
<label>
<input type="checkbox" id="" class="industrie_branch_option" value="">Adventure</label>
</div>
<div class="col-md-2">
<label class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Luxury</label>
</div>
<div class="col-md-2">
<label class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Tattoos</label>
</div>
<div class="col-md-2">
<label class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Provocative</label>
</div>
<div class="col-md-2">
<label>
<input type="checkbox" id="" class="industrie_branch_option" value="">Pets</label>
</div>
<div class="col-md-2">
<label class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Kids</label>
</div>
<div class="col-md-2">
<label>
<input type="checkbox" id="" class="industrie_branch_option" value="">Architecture</label>
</div>
<div class="col-md-2">
<label class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Art & Design</label>
</div>
</div>

The problem is $(':checked').length will return a truthy value if any one of the checkboxes in the page is checked
You can simplify the logic using toggling like
$(".instagram-details a").click(function () {
$(this).toggleClass('active');
$(this).find(':checkbox').prop('checked', $(this).hasClass('active'));
});
Here we first toggle the active class of the clicked anchor element, then we sets the checked state of the checkbox using whether the anchor element has the active class or not
Demo: Fiddle

Change only this:
if ($(':checked').length) {
With this
if (ele.prop("checked")) {
And it works
fiddle: http://jsfiddle.net/zaarwejy/2

There's no need of using JS, if you can restructure the HTML. You can use sibling selector and :checked property of the checkbox to change the styles of the corresponding label.
You can use label.
Demo
:checked + label {
color: red;
}
<div class="row instagram-details">
<div class="col-md-2">
<input type="checkbox" id="1" class="industrie_branch_option" value="">
<label for="1">Sports</label>
</div>
<div class="col-md-2">
<input type="checkbox" id="2" class="industrie_branch_option" value="">
<label for="2">Health & Fitness</label>
</div>
<div class="col-md-2">
<input type="checkbox" id="3" class="industrie_branch_option" value="">
<label for="3">Photography</label>
</div>
<div class="col-md-2">
<input type="checkbox" id="4" class="industrie_branch_option" value="">
<label for="4">Entertainment</label>
</div>
<div class="col-md-2">
<input type="checkbox" id="5" class="industrie_branch_option" value="">
<label for="5">Food</label>
</div>
<div class="col-md-2">
<input type="checkbox" id="6" class="industrie_branch_option" value="">
<label for="6">Travel</label>
</div>
<div class="col-md-2">
<input type="checkbox" id="7" class="industrie_branch_option" value="">
<label for="7">Lifestyle</label>
</div>
<div class="col-md-2">
<input type="checkbox" id="8" class="industrie_branch_option" value="">
<label for="8">Automotive</label>
</div>
<div class="col-md-2">
<input type="checkbox" id="9" class="industrie_branch_option" value="">
<label for="9">Fashion</label>
</div>
<div class="col-md-2">
<input type="checkbox" id="10" class="industrie_branch_option" value="">
<label for="10">Beauty</label>
</div>
</div>
If you cannot change the HTML structure, then you need to use JS.
Your selector $(':checked').length checks if there is atleast one checked checkbox. So, when one checkbox is checked for next checkbox the code doesn't work.
To toggle the checkbox state use
ele.prop('checked', !ele.checked);
To toggle class use
$(this).toggleClass('active', ele.is(':checked'));
Updated Fiddle
$(".instagram-details a").click(function() {
var ele = $(this).closest('a').find(':checkbox');
ele.prop('checked', !ele.checked);
$(this).toggleClass('active', ele.is(':checked'));
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="row instagram-details">
<div class="col-md-2">
<a href="javascript:void(0);" class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Sports</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);">
<input type="checkbox" id="" class="industrie_branch_option" value="">Health & Fitness</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);">
<input type="checkbox" id="" class="industrie_branch_option" value="">Photography</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);">
<input type="checkbox" id="" class="industrie_branch_option" value="">Entertainment</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);">
<input type="checkbox" id="" class="industrie_branch_option" value="">Food</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);" class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Travel</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);">
<input type="checkbox" id="" class="industrie_branch_option" value="">Lifestyle</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);">
<input type="checkbox" id="" class="industrie_branch_option" value="">Automotive</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);" class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Fashion</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);">
<input type="checkbox" id="" class="industrie_branch_option" value="">Beauty</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);" class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Youth</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);" class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Technology</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);">
<input type="checkbox" id="" class="industrie_branch_option" value="">Weddings</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);">
<input type="checkbox" id="" class="industrie_branch_option" value="">Adventure</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);" class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Luxury</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);" class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Tattoos</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);" class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Provocative</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);">
<input type="checkbox" id="" class="industrie_branch_option" value="">Pets</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);" class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Kids</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);">
<input type="checkbox" id="" class="industrie_branch_option" value="">Architecture</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);" class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Art & Design</a>
</div>
</div>

Check this!
$(".instagram-details a").click(function () {
var ele = $(this).closest('a').find(':checkbox');
if ($(ele).prop('checked')) {
ele.prop('checked', false);
$(this).removeClass('active');
} else {
ele.prop('checked', true);
$(this).addClass('active');
}
});

Change your code with following
$(".instagram-details a").click(function () {
var ele = $(this).closest('a').find(':checkbox');
if (ele.prop('checked')) {
ele.prop('checked', false);
$(this).removeClass('active');
} else {
ele.prop('checked', true);
$(this).addClass('active');
}
});

Categories