We Keep Coding

How do I get the dynamically loaded element that was clicked with jQuery

I am dynamically loading content into my page. When one of the images is clicked I need to de-select all the others and select the checkbox of the one that has been clicked. I need to do this if either the image, text of checkbox is clicked.
this contains all the li elements, not just the one that was clicked.
Can anyone suggest how I can identify which of the li elements was the one that triggered the code?
$('#colours').click('li', function() {
$(this).children('li').find('input').prop('checked', false);
$(this).find('input').prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="colours">
<li>
<label for="">
<img src="swatch-1.jpg" alt=""><input type="checkbox" value="1"> <span>Red</span>
</label>
</li>
<li>
<label for="">
<img src="swatch-2.jpg" alt=""><input type="checkbox" value="2"> <span>Green</span>
</label>
</li>
<li>
<label for="">
<img src="swatch-3.jpg" alt=""><input type="checkbox" value="3"> <span>Blue</span>
</label>
</li>
</ul>

Firstly it appears that you're attempting to create a delegated event handler, however your syntax for that is not correct and is the cause of your problem. You need to use on() with an event name and selector instead of click. From there you can select the li directly using the this reference, something like this:
$('#colours').on('click', 'li', function() {
$('#colours li').find('input').prop('checked', false);
$(this).find('input').prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="colours">
<li>
<label>
<img src="swatch-1.jpg" alt="">
<input type="checkbox" value="1">
<span>Red</span>
</label>
</li>
<li>
<label>
<img src="swatch-2.jpg" alt="">
<input type="checkbox" value="2">
<span>Green</span>
</label>
</li>
<li>
<label>
<img src="swatch-3.jpg" alt="">
<input type="checkbox" value="3">
<span>Blue</span>
</label>
</li>
</ul>
However, the behaviour you're creating here, where only one checkbox can be selected at any one time, is identical to the standard behaviour of radio input elements. As such, it would make more sense to just use those instead. That way you don't need any JS code at all:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="colours">
<li>
<label>
<img src="swatch-1.jpg" alt="">
<input type="radio" name="swatch" value="1">
<span>Red</span>
</label>
</li>
<li>
<label>
<img src="swatch-2.jpg" alt="">
<input type="radio" name="swatch" value="2">
<span>Green</span>
</label>
</li>
<li>
<label>
<img src="swatch-3.jpg" alt="">
<input type="radio" name="swatch" value="3">
<span>Blue</span>
</label>
</li>
</ul>

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/

disable button when class on li doesnt exist

I want to prevent the button to be click when there are no item selected in the list. Only enable it when at least 1 in the list have highlight class.
HTML
<ul class="list">
<li><input type="checkbox" name="cat[]" id="1" value="227">
<label class="label-list" for="1">Select</label></li>
<li><input type="checkbox" name="cat[]" id="2" value="227">
<label class="label-list" for="2">Select</label></li>
<li><input type="checkbox" name="cat[]" id="3" value="227">
<label class="label-list" for="3">Select</label></li>
<li><input type="checkbox" name="cat[]" id="4" value="227">
<label class="label-list" for="4">Select</label></li>
</ul>
<input type="submit" id="search" class="btn-info" value="search" disabled>
SCRIPT:
$(".list .label-list").click(function() {
$(this).toggleClass("highlight");
});
CSS:
.highlight {background:red;}
FIDDLE
Tried to use this script but how do I toggle the attr from disabled to enabled?
if( $('.list .label-list').hasClass('highlight') === true )
{
$('#search').addClass('active');
}

You should rather test for is :checked like
var $checkb = $(".list").find("input[type='checkbox']"),
$search = $("#search");
$checkb.on("change", function(){
$search.prop("disabled", !$checkb.is(":checked"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
<li>
<label>
<input type="checkbox" name="cat[]" value="224">
Select
</label>
</li>
<li>
<label>
<input type="checkbox" name="cat[]" value="225">
Select
</label>
</li>
<li>
<label>
<input type="checkbox" name="cat[]" value="226">
Select
</label>
</li>
<li>
<label>
<input type="checkbox" name="cat[]" value="227">
Select
</label>
</li>
</ul>
<input type="submit" id="search" class="btn-info" value="search" disabled>

you can simple count all selected checkbox with this jquery selector
$('input[type=checkbox]:checked').length
this returns the total count of the checkbox selected
just add this event listener which occurs every time a checkbox value is change
$(document).on('change', 'input[type=checkbox]', function() {
var disabled = $('input[type=checkbox]:checked').length ? false: true;
$("#search").attr('disabled', disabled);
})
DEMO

jQuery select all inputs under ul li

How can I select all input checkboxes in li under a specific ul?
I have:
<ul id="something">
<li>
<input type="checkbox">
</li>
<li>
<input type="checkbox">
</li>
...
</ul>
Thanks

You can use $('ul li input[type=checkbox]')
Here is a working example, you can see that the console.log will show only input's a, b, d (because c's type is not checkbox).
checkboxes = $('ul li input[type=checkbox]')
checkboxes.each(function(e) {
console.log($(this).attr('name'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="something">
<li>
<input name="a" type="checkbox">
</li>
<li>
<input name="b" type="checkbox">
</li>
<li>
<input name="c" type="text">
</li>
<li>
<input name="d" type="checkbox">
</li>
</ul>

You should be able to use the ID selector for your UL like this:
var checkboxes = $("#something li input[type=checkbox]");
checkboxes.each(function(e) {
console.log($(this).attr('name'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="something">
<li>
<input name="a" type="checkbox">
</li>
<li>
<input name="b" type="checkbox">
</li>
<li>
<input name="c" type="text">
</li>
<li>
<input name="d" type="checkbox">
</li>
</ul>
<ul id="not-these">
<li>
<input name="a-no" type="checkbox">
</li>
<li>
<input name="b-no" type="checkbox">
</li>
<li>
<input name="c-no" type="text">
</li>
<li>
<input name="d-no" type="checkbox">
</li>
</ul>

This code will let you get all the input's html
jQuery(document).ready(function()
{
jQuery( "ul#something li" ).each(function( index ) {
var html = jQuery(this).find('input[type=checkbox]').html();
console.log(html);
});
});