How to show set of Checkbox based on a previous checkbox - javascript

I have a form with a list of checkbox on it. When a user selects "Laboratory", I want the second list of checkbox to be shown. I dont want the second list of checkboxes to be shown until they have clicked on the "Laboratory" checkbox.
How do I accomplish this in Javascript or jQuery?
Here's the php code for first list of checkbox
<?php
$tsql = "select medTestName from medtest";
$tstmt = $con->prepare($tsql);
$tstmt->execute();
$tstmt->bind_result($mtn);
$tstmt->store_result();
while ($tstmt->fetch()){
$d1= '<input type="checkbox" name="test[]"
value="'.$mtn.'">'.$mtn.'<br>';
echo $d1;
}
?>
Here's the image of database which is the first list of checkbox
Here's the image or the UI of the first list of checkbox
Here's my html code for the second list of checkbox
<div><input type="checkbox" name="topic" value="1"><span>Complete Blood Count</span></div>
<div><input type="checkbox" name="topic" value="2"><span>Blood Typing</span></div>
<div><input type="checkbox" name="topic" value="3"><span>Urinalysis</span></div>
<div><input type="checkbox" name="topic" value="4"><span>RPR/TPHA</span></div>
<div><input type="checkbox" name="topic" value="5"><span>Hepatitis B screening</span></div>
<div><input type="checkbox" name="topic" value="6"><span>Fasting Blood Sugar</span></div>
<div><input type="checkbox" name="topic" value="7"><span>Creatinine</span></div>
<div><input type="checkbox" name="topic" value="8"><span>Total Cholesterol(Low Cholesterol, High Cholesterol)</span></div>
<div><input type="checkbox" name="topic" value="9"><span>Triglyceride</span></div>
<div><input type="checkbox" name="topic" value="10"><span>VLDL</span></div>
<div><input type="checkbox" name="topic" value="11"><span>Blood Uric Acid</span></div>
<div><input type="checkbox" name="topic" value="12"><span>Anti-HAV Igm Screening</span></div>
<div><input type="checkbox" name="topic" value="13"><span>Anti HBaAg</span></div>
<div><input type="checkbox" name="topic" value="14"><span>Drug & Alcohol Test</span></div>
<div><input type="checkbox" name="topic" value="15"><span>Stool Culture</span></div>

You can use like below,
Also you can make it dynamic using php
$(document).ready(function() {
//initially hide all the sub lists
$(".sublists").children().each(function() {
if ($(this).attr("data-sub-list") == "true") {
$(this).hide();
}
});
// when you click the checkbox show Radiology,Radiology or ect.
$("input[name=test]").click(function() {
var list = $(this).attr("data-list");
console.log(list);
if ($(this).prop('checked')) {
$("#" + list + "").show();
} else {
$("#" + list + "").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-xs-7">
<input type="checkbox" name="test" id="Radiology" value="Radiology" data-list="Radiology-list">Radiology
<input type="checkbox" name="test" id="Laboratory" value="Laboratory" data-list="Laboratory-list">Laboratory
</div>
<div class="sublists">
<div id="Laboratory-list" data-sub-list="true">
<h4>Laboratory list</h4>
<div class="col-xs-7">
<input type="checkbox" name="topic" value="Creatinine">Creatinine
<input type="checkbox" name="topic" value="Triglyceride">Triglyceride
<input type="checkbox" name="topic" value="VLDL">VLDL
</div>
</div>
<div id="Radiology-list" data-sub-list="true">
<h4>Radiology list</h4>
<div class="col-xs-7">
<input type="checkbox" name="topic" value="one">One
<input type="checkbox" name="topic" value="two">Two
</div>
</div>
</div>

In all cases, you have to generate it (in a hidden ul for example) and show it with jQuery like $("#mydiv").toggle();
Here is the jsfiddle : https://jsfiddle.net/6ufzban3/

You can use the JQuery .toggle() function to show/hide elements.
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
if ($(this).attr("value") == "lab") {
$(".labboxes").toggle();
}
});
});
.labboxes {
margin: 10px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox">Radiology
<input type="checkbox" value="lab">Laboratory
<div class="labboxes">
<div>
<input type="checkbox" name="topic"><span>Triglyceride</span>
</div>
<div>
<input type="checkbox" name="topic"><span>VLDL</span>
</div>
<div>
<input type="checkbox" name="topic"><span>Creatinine</span>
</div>
</div>

<?php
$tsql = "select medTestName from medtest";
$tstmt = $con->prepare($tsql);
$tstmt->execute();
$tstmt->bind_result($mtn);
$tstmt->store_result();
while ($tstmt->fetch()){
$d1= '<input type="checkbox" name="test[]" value="'.$mtn.'">'.$mtn.'<br>';
echo $d1;
}
?>

Related

Sliced or hide Checkbox select option

I have two select option categories. The first One Strong Subjects and second one is Weak Subject.
All options are same in both category. What i want is after selecting the strong subject, the selected option get removed from weak subject category.
function strongsubjects(){
var str = document.querySelector(".strong input");
str.style.display="none";
}
<div class="strong">
<input type="checkbox" onclick="strongsubjects()" value="1">1
<input type="checkbox" onclick="strongsubjects()" value="2">2
<input type="checkbox" onclick="strongsubjects()" value="3">3
</div>
<div class="weak">
<input type="checkbox" onclick="weaksubjects()" value="1">1
<input type="checkbox" onclick="weaksubjects()" value="2">2
<input type="checkbox" onclick="weaksubjects()" value="3">3
</div>
This is what you want I think
function strongsubjects(obj){
if(obj.checked){
document.querySelector(`[data-week-val="${obj.value}"]`).style.display="none";
}
else{
document.querySelector(`[data-week-val="${obj.value}"]`).style.display="block";
}
}
function weaksubjects(obj){
if(obj.checked){
document.querySelector(`[data-strong-val="${obj.value}"]`).style.display="none";
}
else{
document.querySelector(`[data-strong-val="${obj.value}"]`).style.display="block";
}
}
<div class="strong" style="width:50%;float:left">
Strong
<div data-strong-val="1">
<input type="checkbox" onclick="strongsubjects(this)" value="1">1
</div>
<div data-strong-val="2">
<input type="checkbox" onclick="strongsubjects(this)" value="2">2
</div>
<div data-strong-val="3">
<input type="checkbox" onclick="strongsubjects(this)" value="3">3
</div>
</div>
<div class="weak" width="50%" style="width:50%;float:left">
Week
<div data-week-val="1">
<input type="checkbox" onclick="weaksubjects(this)" value="1">1
</div>
<div data-week-val="2">
<input type="checkbox" onclick="weaksubjects(this)" value="2">2
</div>
<div data-week-val="3">
<input type="checkbox" data-week-val="3" onclick="weaksubjects(this)" value="3">3
</div>
</div>
I hope this is what you're looking for. The below code loops through all the checked checkboxes in each .weak and .strong divs, and hides the corresponding checkbox in the other div.
Before hiding the divs, all the previously hidden checkboxes are shown temporarily (in the 1st 2 lines of the function)
function filterOptions(){
$(".strong input[type='checkbox']").show();
$(".weak input[type='checkbox']").show();
$(".strong input[type='checkbox']:checked").each( function(){
$(".weak input[data-subject='" + $(this).attr("data-subject") + "']").hide()
})
$(".weak input[type='checkbox']:checked").each( function(){
$(".strong input[data-subject='" + $(this).attr("data-subject") + "']").hide()
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="strong">
<input type="checkbox" onclick="filterOptions()" data-subject="1">1
<input type="checkbox" onclick="filterOptions()" data-subject="2">2
<input type="checkbox" onclick="filterOptions()" data-subject="3">3
</div>
<div class="weak">
<input type="checkbox" onclick="filterOptions()" data-subject="1">1
<input type="checkbox" onclick="filterOptions()" data-subject="2">2
<input type="checkbox" onclick="filterOptions()" data-subject="3">3
</div>
I have assumed that the values are sorted as showed in the image. You could reverese the logic for weaksubjects function.
function strongsubjects(){
const weakSubject = document.querySelectorAll(".weak input");
const strongSubject = document.querySelectorAll(".strong input").forEach((el,index) => {
if (el.checked) {
weakSubject[index].parentElement.style.display= 'none';
} else {
weakSubject[index].parentElement.style.display= 'block';
}
});
}
<div class="strong">
<div><input type="checkbox" onclick="strongsubjects()" value="1">1</div>
<div><input type="checkbox" onclick="strongsubjects()" value="2">2</div>
<div><input type="checkbox" onclick="strongsubjects()" value="3">3</div>
</div>
<div class="weak">
<div><input type="checkbox" onclick="weaksubjects()" value="1">1</div>
<div><input type="checkbox" onclick="weaksubjects()" value="2">2</div>
<div><input type="checkbox" onclick="weaksubjects()" value="3">3</div>
</div>

loop and submit form jquery

I have 2 form. When I submit frm1, i have some checked option and use variable checkedValues to store it.
I loop in each checked option, change value to frm2, submit it and open a popup after 3 second. But it not work with submit form 2 and setTimeout function.
Does anyone have any ideas to solve this?
<form action="" method="post" name='frm1'>
<input type="checkbox" name="1" id="1" value="1" class="checkbox">
<input type="checkbox" name="2" id="2" value="1" class="checkbox">
<input type="checkbox" name="3" id="3" value="0" class="checkbox">
<input type="checkbox" name="4" id="4" value="0" class="checkbox">
<input type="submit" value='add'>
</form>
<form action='http://example.com' method='post' name='frm2' target="_blank">
<input type="text" name="fname" class="form-control" value=''>
<input type="text" name="fvalue"class="form-control" value=''>
</form>
<script>
$('#add').click(function(){
var store= <?php echo json_encode($store)?>;
var checkedValues = $('input:checkbox:checked').map(function() {
return this.id;
}).get();
$.each(checkedValues, function(index,val) {
document.frm2.fname.value = store[val]['name'];
document.frm2.fvalue.value = store[val]['value'];
document.frm2.submit(); // not working
setTimeout(function () { // not working
window.open("http://example.com/client, "_blank"), 3000);
});
});
});
</script>
The problem here is that your first form is being submitted, so your page gets reloaded and the second part of the script isn't executed. To prevent that you should use AJAX.
<input type="checkbox" name="1" id="1" value="1" class="checkbox">
<input type="checkbox" name="2" id="2" value="1" class="checkbox">
<input type="checkbox" name="3" id="3" value="0" class="checkbox">
<input type="checkbox" name="4" id="4" value="0" class="checkbox">
<button id="bt-add">add</button>
<form action='http://example.com' method='post' id="second-form" name='frm2' target="_blank">
<input type="text" name="name" class="form-control" value=''>
<input type="text" name="value" class="form-control" value=''>
</form>
<script>
$('#bt-add').click(function(){
var store= <?php echo json_encode($store)?>;
var checkedValues = $('input:checkbox:checked').map(function() {
return this.id;
}).get();
$.each(checkedValues, function(index,val) {
$("#second-form").find("input[name='name']").val(store[val]['name']);
$("#second-form").find("input[name='value']").val(store[val]['value']);
$.ajax({
url: "http://example.com",
type:'GET',
data: $("#second-form").serialize()
});
});
setTimeout(function () {
window.open("http://example.com/client", "_blank");
}, 3000);
});
</script>
Fiddle here.

using checkboxes for multiple instances

I have this script. Everything is working except I need to make it work with multi-able items. The first set of work perfectly, but I can seam to replicate it on the second and third set of check boxes.
$(".checkall").on('change', function()
{
// all normal checkboxes will have a class "chk_xxxxxx"
// where "xxxx" is the name of the location, e.g. "chk_wales"
// get the class name from the id of the "check all" box
var checkboxesClass = '.chk_' + $(this).attr("id");
// now get all boxes to check
var boxesToCheck = $(checkboxesClass);
// check all the boxes
boxesToCheck.prop('checked', this.checked);
});
$("#check1 input[type=checkbox], #wales").on("change", function()
{
checkBoxes();
});
function checkBoxes()
{
$("#checked").empty();
if($("#check1 input[type=checkbox]:checked").length == $("#check1 input[type=checkbox]").length)
{
$("#wales").prop("checked", true);
// Display the id of the "check all" box
$("#checked").html($("#checked").html() + "<h3>Wales</h3>");
}
else
{
$("#wales").prop("checked", false);
$("#check1 input[type=checkbox]:checked").each(function()
{
$("#checked").html($("#checked").html() + $(this).next().text() + "<br>");
});
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- <input type="checkbox" id="wales" class="checkall" value="1">
<label for="wales" >Check All</label>
<input type="checkbox" id="checkItem1" value="2" class="chk_wales">
<label for="checkItem1" >Item 1</label>
<input type="checkbox" id="checkItem2" value="2" class="chk_wales">
<label for="checkItem2" >Item 2</label>
<input type="checkbox" id="checkItem3" value="2" class="chk_wales">
<label for="checkItem3" >Item 3</label>-->
<hr />
<input type="checkbox" id="wales" class="checkall" value="1">
<label for="wales">Check All</label>
<section id="check1">
<input type="checkbox" id="checkItem1" value="2" class="chk_wales">
<label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem2" value="2" class="chk_wales">
<label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem3" value="2" class="chk_wales">
<label for="checkItem3">Item 3</label>
</section>
<hr />
<input type="checkbox" id="west" class="checkall" value="3">
<label for="west">Check All</label>
<section id="check2">
<input type="checkbox" id="checkItem4" value="4" class="chk_west">
<label for="checkItem4">Item 1</label>
<input type="checkbox" id="checkItem5" value="4" class="chk_west">
<label for="checkItem5">Item 2</label>
<input type="checkbox" id="checkItem6" value="4" class="chk_west">
<label for="checkItem6">Item 3</label>
</section>
<hr />
<input type="checkbox" id="east" class="checkall" value="5">
<label for="east">Check All</label>
<section id="check3">
<input type="checkbox" id="checkItem7" value="6" class="chk_east">
<label for="checkItem7">Item 1</label>
<input type="checkbox" id="checkItem8" value="6" class="chk_east">
<label for="checkItem8">Item 2</label>
<input type="checkbox" id="checkItem9" value="6" class="chk_east">
<label for="checkItem9">Item 3</label>
</section>
<p>You have selected:</p>
<div id="checked">
</div>
</body>
</html>
Please can anyone help?
Many thanks in advance.
remove checkBoxes() method and replace the last event handlers as (check this fiddle)
//put the event handler directly on the checkboxes inside the section
$( "section input[type='checkbox']" ).on("change", function()
{
console.log( $( this ) );
//get the handle to the parent section
var $parentSection = $( this ).parent();
//compare the number of checked checkboxes with total one
if( $parentSection.find( "input[type='checkbox']:checked" ).length == $parentSection.find( "input[type=checkbox]" ).length )
{
$parentSection.prev().prev().prop("checked", true);
//write checkall's textbox id
$("#checked").append( "<h3>" + $parentSection.prev().prev().attr( "id" ) + "</h3>");
}
else
{
$parentSection.prev().prev().prop("checked", false);
//write each and every checked box's text
$parentSection.find("input[type='checkbox']:checked").each(function()
{
$("#checked").html($("#checked").html() + $(this).next().text() + "<br>");
});
}
});
Following code snippet should fulfill your requirements. Hope this will help you.
var checkedDiv = $("#checked");
$('input[type=checkbox]').on('change', function() {
if (this.className == 'checkall') {
var section = $(this).nextAll('section:first');
section.find('input[type=checkbox]').prop('checked', this.checked);
} else {
var parentSection = $(this).parent();
var checkall = parentSection.prevAll(".checkall:first")
var isEqual = parentSection.find("input[type=checkbox]:checked").length == parentSection.find("input[type=checkbox]").length;
checkall.prop("checked", isEqual);
}
checkedDiv.html('');
$('.checkall').each(function() {
if (this.checked) {
checkedDiv.append('<h3>' + this.id + '</h3><br/>');
} else {
var section = $(this).nextAll('section:first');
section.find("input[type=checkbox]:checked").each(function() {
checkedDiv.append($(this).next().text() + "<br>");
});
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="wales" class="checkall" value="1">
<label for="wales">Check All</label>
<section id="check1">
<input type="checkbox" id="checkItem1" value="2" class="chk_wales">
<label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem2" value="2" class="chk_wales">
<label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem3" value="2" class="chk_wales">
<label for="checkItem3">Item 3</label>
</section>
<hr />
<input type="checkbox" id="west" class="checkall" value="3">
<label for="west">Check All</label>
<section id="check2">
<input type="checkbox" id="checkItem4" value="4" class="chk_west">
<label for="checkItem4">Item 1</label>
<input type="checkbox" id="checkItem5" value="4" class="chk_west">
<label for="checkItem5">Item 2</label>
<input type="checkbox" id="checkItem6" value="4" class="chk_west">
<label for="checkItem6">Item 3</label>
</section>
<hr />
<input type="checkbox" id="east" class="checkall" value="5">
<label for="east">Check All</label>
<section id="check3">
<input type="checkbox" id="checkItem7" value="6" class="chk_east">
<label for="checkItem7">Item 1</label>
<input type="checkbox" id="checkItem8" value="6" class="chk_east">
<label for="checkItem8">Item 2</label>
<input type="checkbox" id="checkItem9" value="6" class="chk_east">
<label for="checkItem9">Item 3</label>
</section>
<p>You have selected:</p>
<div id="checked"></div>

check all check boxes

I’m having some problems with some JavaScript I created. When a item from check all is Unchecked it needs to remove the checked from the checked all box, also when the check all is checked I don’t want to to pull through the other items only the check all box.
check all, item 1, item 2
Remove item 1 and check all un-checks and all that gets pulled through is item. If check all is checked the item 1 and item 2 are checked but then not pulled through.
// all "check all" checkboxes will have the class "checkall"
// and the id to match the location, e.g. wales, etc
$(".checkall").on('change', function() {
// all normal checkboxes will have a class "chk_xxxxxx"
// where "xxxx" is the name of the location, e.g. "chk_wales"
// get the class name from the id of the "check all" box
var checkboxesClass = '.chk_' + $(this).attr("id");
// now get all boxes to check
var boxesToCheck = $(checkboxesClass);
// check all the boxes
boxesToCheck.prop('checked', this.checked);
});
// display what the user has chosen
$("input[type='checkbox']").change(function() {
$("#checked").empty();
$("input[type='checkbox']:checked").each(function() {
// see if it is a "check all" box
if ($(this).attr("class") === "checkall") {
// Display the id of the "check all" box
$("#checked").html($("#checked").html() + '<h3>' + $(this).attr("id").toUpperCase() + "</h3>");
} else {
// display the label text for all normal checkboxes
$("#checked").html($("#checked").html() + $(this).next().text() + "<br>");
}
});
});
// With some more work you could make the Check All headings show when only one or two checkboxes were checked. It depends how you need it to work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="wales" class="checkall" value="1">
<label for="wales">Check All</label>
<input type="checkbox" id="checkItem1" value="2" class="chk_wales">
<label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem2" value="2" class="chk_wales">
<label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem3" value="2" class="chk_wales">
<label for="checkItem3">Item 3</label>
<hr />
<input type="checkbox" id="west" class="checkall" value="3">
<label for="west">Check All</label>
<input type="checkbox" id="checkItem4" value="4" class="chk_west">
<label for="checkItem4">Item 1</label>
<input type="checkbox" id="checkItem5" value="4" class="chk_west">
<label for="checkItem5">Item 2</label>
<input type="checkbox" id="checkItem6" value="4" class="chk_west">
<label for="checkItem6">Item 3</label>
<hr />
<input type="checkbox" id="east" class="checkall" value="5">
<label for="east">Check All</label>
<input type="checkbox" id="checkItem7" value="6" class="chk_east">
<label for="checkItem7">Item 1</label>
<input type="checkbox" id="checkItem8" value="6" class="chk_east">
<label for="checkItem8">Item 2</label>
<input type="checkbox" id="checkItem9" value="6" class="chk_east">
<label for="checkItem9">Item 3</label>
<p>You have selected:</p>
<div id="checked">
</div>
</body>
</html>
Not sure what you mean by 'pulled through', but unchecking the check-all can be achieved through:
if (!$currentCheckbox.hasClass('checkall')) {
var $previousCheckAll = $currentCheckbox.prevAll('.checkall');
if ($previousCheckAll.length>0)
{
$previousCheckAll.first().prop('checked',false);
}
}
Just insert the code above beneath the line
$("#checked").empty();
of your JSbin.
This code should work if im not mistaken what you are trying to say. I have done for first set of checkboxes. You can do it for next two:
$("#check1 input[type=checkbox]").on("change", function() {
if($("#check1 input[type=checkbox]:checked").length == $("#check1 input[type=checkbox]").length) {
$("#wales").prop("checked",true);
}
else {
$("#wales").prop("checked",false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="wales" class="checkall" value="1">
<label for="wales">Check All</label>
<section id="check1">
<input type="checkbox" id="checkItem1" value="2" class="chk_wales">
<label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem2" value="2" class="chk_wales">
<label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem3" value="2" class="chk_wales">
<label for="checkItem3">Item 3</label>
</section>
UPDATE
This will fulfill your requirement. Remove your $("input[type='checkbox']").change(function() code and use the updated one
$("#check1 input[type=checkbox]").on("change", function()
{
$("#checked").empty();
if($("#check1 input[type=checkbox]:checked").length == $("#check1 input[type=checkbox]").length)
{
$("#wales").prop("checked", true);
// Display the id of the "check all" box
$("#checked").html($("#checked").html() + "<h3>Wales</h3>");
}
else
{
$("#wales").prop("checked", false);
$("#check1 input[type=checkbox]:checked").each(function()
{
$("#checked").html($("#checked").html() + $(this).next().text() + "<br>");
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="wales" class="checkall" value="1">
<label for="wales">Check All</label>
<section id="check1">
<input type="checkbox" id="checkItem1" value="2" class="chk_wales">
<label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem2" value="2" class="chk_wales">
<label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem3" value="2" class="chk_wales">
<label for="checkItem3">Item 3</label>
</section>
<hr/>
<div id="checked">
</div>
Another Update
$(".checkall").on('change', function()
{
// all normal checkboxes will have a class "chk_xxxxxx"
// where "xxxx" is the name of the location, e.g. "chk_wales"
// get the class name from the id of the "check all" box
var checkboxesClass = '.chk_' + $(this).attr("id");
// now get all boxes to check
var boxesToCheck = $(checkboxesClass);
// check all the boxes
boxesToCheck.prop('checked', this.checked);
});
$("#check1 input[type=checkbox], #wales").on("change", function()
{
checkBoxes();
});
function checkBoxes()
{
$("#checked").empty();
if($("#check1 input[type=checkbox]:checked").length == $("#check1 input[type=checkbox]").length)
{
$("#wales").prop("checked", true);
// Display the id of the "check all" box
$("#checked").html($("#checked").html() + "<h3>Wales</h3>");
}
else
{
$("#wales").prop("checked", false);
$("#check1 input[type=checkbox]:checked").each(function()
{
$("#checked").html($("#checked").html() + $(this).next().text() + "<br>");
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="wales" class="checkall" value="1">
<label for="wales">Check All</label>
<section id="check1">
<input type="checkbox" id="checkItem1" value="2" class="chk_wales">
<label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem2" value="2" class="chk_wales">
<label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem3" value="2" class="chk_wales">
<label for="checkItem3">Item 3</label>
</section>
<hr/>
<div id="checked">
</div>

Jquery check box filter

I am attemting to filter list items depending on whether certain checkboxes are checked or not.
I have managed to get the filtering to work but I am struggling to remove all list items on page load.
The idea is for 'list items' not to display untill the 'options' checkboxes are ckecked
I have placed my working version online here http://dev.perfectdaycanada.com/filter/
Thank you in advanced to anyone who can help me, it's much appreciated.
The javascript for filtering:
$(document).ready(function(){
$("input.type_check").attr("checked", "").click(function() {
if($(this).is(':checked')) {
$("#case-studies li."+$(this).attr('id')).removeClass('type_hidden');
$("#case-studies li").not(".type_hidden, .start_hidden").slideDown();
} else {
$("#case-studies li."+$(this).attr('id')).addClass('type_hidden');
$("#case-studies li."+$(this).attr('id')).slideUp();
}
});
$("input.start_check").attr("checked", "").click(function() {
if($(this).is(':checked')) {
$("#case-studies li."+$(this).attr('id')).removeClass('start_hidden');
$("#case-studies li").not(".type_hidden, .start_hidden").slideDown();
} else {
$("#case-studies li."+$(this).attr('id')).addClass('start_hidden');
$("#case-studies li."+$(this).attr('id')).slideUp();
}
});
});
HTML:
<div>
<input name="action-areas[]" type="checkbox" id="areas_crop_initiatives" value="0" class="type_check" checked="checked" />
<label for="areas_crop_initiatives">Crop initiatives</label>
</div>
<div>
<input name="action-areas[]" type="checkbox" id="areas_managment" value="1" class="type_check" checked="checked" />
<label for="areas_managment">Management</label>
</div>
<div>
<input name="action-areas[]" type="checkbox" id="areas_assurance" value="2" class="type_check" checked="checked" />
<label for="areas_assurance">Assurance/certification</label>
</div>
<div>
<input name="action-areas[]" type="checkbox" id="areas_environmental" value="3" class="type_check" checked="checked" />
<label for="areas_environmental">Environmental management</label>
</div>
<div>
<input name="action-areas[]" type="checkbox" id="areas_biodiversity" value="4" class="type_check" checked="checked" />
<label for="areas_biodiversity">Biodiversity</label>
</div>
<div>
<input name="action-areas[]" type="checkbox" id="areas_staff" value="5" class="type_check" checked="checked" />
<label for="areas_staff">Staff</label>
</div>
<div>
<input name="action-areas[]" type="checkbox" id="areas_community" value="6" class="type_check" checked="checked" />
<label for="areas_community">Community</label>
</div>
<ul id="case-studies">
<li id="event_1768" class="ethics_agrochemical_usage ethics_input_costs farms_potatoes areas_crop_initiatives">– Potatoes, Poland</li>
<li id="event_2190" class="ethics_hcvl farms_beef areas_community areas_managment countries_austria">– Beef, Ireland</li>
<li id="event_2191" class="ethics_air_emissions farms_tomatoes areas_assurance countries_austria">– Tomatoes, Portugal</li>
</ul>
Just add the class type_hidden to your list items like this:
<li id="event_1768" class="other classes type_hidden">– Potatoes, Poland</li>
(and than for all list items of course)

Categories

Resources