Issue in multi select filter - javascript

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


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

Related

select checkbox on input textbox by jquery

This is javascript:
$('.chkbx').click(function(){
var text = "";
$('.chkbx:checked').each(function(){
text += $(this).val()+',';
});
text = text.substring(0,text.length-1);
$('#textbx').val(text);
});
When I select numbers in the checkbox, It does not work in the input textbox.
JSFiddle

You can use .change event instead of .click like below,
$('.chkbx').change(function() {
// this will contain a reference to the checkbox
var text = "";
$('.chkbx:checked').each(function() {
text += $(this).val() + ',';
});
text = text.substring(0, text.length - 1);
console.log(text)
$('#textbx').val(text);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="cat_list">
<li>
<input id="1" value="1" type="checkbox" class="chkbx" name="cat[]">
<label for="1" class="selectit">1</label>
<ul class="children">
<li>
<input id="11" value="11" type="checkbox" class="chkbx" name="cat[]">
<label for="11" class="selectit">11</label>
<ul class="children">
<li>
<input id="111" value="111" type="checkbox" class="chkbx" name="cat[]">
<label for="111" class="selectit">111</label>
</li>
<li>
<input id="112" value="112" type="checkbox" class="chkbx" name="cat[]">
<label for="112" class="selectit">112</label>
</li>
</ul>
</li>
<li>
<input id="12" value="12" type="checkbox" class="chkbx" name="cat[]">
<label for="12" class="selectit">12</label>
</li>
<li>
<input id="13" value="13" type="checkbox" class="chkbx" name="cat[]">
<label for="13" class="selectit">13</label>
</li>
<li>
<input id="14" value="14" type="checkbox" class="chkbx" name="cat[]">
<label for="14" class="selectit">14</label>
</li>
<li>
<input id="15" value="15" type="checkbox" class="chkbx" name="cat[]">
<label for="15" class="selectit">15</label>
<ul class="children">
<li>
<input id="151" value="151" type="checkbox" class="chkbx" name="cat[]">
<label for="151" class="selectit">151</label>
</li>
<li>
<input id="152" value="152" type="checkbox" class="chkbx" name="cat[]">
<label for="152" class="selectit">152</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<br/><br/>
<input type='text' id='textbx' value='' />

Get dynamic group of checkboxes grouped by an attribute

im developing an ACL manager and permissions on ACL GUI are created dynamically based on controllers in database. So if they are 3 controllers for example, I get 3 groups of 4 checkboxes (read, write, delete, execute). They have different ids, value based on checkbox (read=r, write=w...) and same data-id as controller id.
<ul class="list-group">
home
<li class="list-group-item">
Read
<div class="material-switch pull-right">
<input id="check_permisssion_read1" class="acl_permission" type="checkbox" name="acl_permission[]" value="r" data-id="1">
<label for="check_permisssion_read1" class="label-success"></label>
</div>
</li>
<li class="list-group-item">
Write
<div class="material-switch pull-right">
<input id="check_permisssion_write1" class="acl_permission" type="checkbox" name="acl_permission[]" value="w" data-id="1">
<label for="check_permisssion_write1" class="label-success"></label>
</div>
</li>
<li class="list-group-item">
Delete
<div class="material-switch pull-right">
<input id="check_permisssion_delete1" class="acl_permission" type="checkbox" name="acl_permission[]" value="d" data-id="1">
<label for="check_permisssion_delete1" class="label-success"></label>
</div>
</li>
<li class="list-group-item">
Execute
<div class="material-switch pull-right">
<input id="check_permisssion_execute1" class="acl_permission" type="checkbox" name="acl_permission[]" value="e" data-id="1">
<label for="check_permisssion_execute1" class="label-success"></label>
</div>
</li>
acl
<li class="list-group-item">
Read
<div class="material-switch pull-right">
<input id="check_permisssion_read2" class="acl_permission" type="checkbox" name="acl_permission[]" value="r" data-id="2">
<label for="check_permisssion_read2" class="label-success"></label>
</div>
</li>
<li class="list-group-item">
Write
<div class="material-switch pull-right">
<input id="check_permisssion_write2" class="acl_permission" type="checkbox" name="acl_permission[]" value="w" data-id="2">
<label for="check_permisssion_write2" class="label-success"></label>
</div>
</li>
<li class="list-group-item">
Delete
<div class="material-switch pull-right">
<input id="check_permisssion_delete2" class="acl_permission" type="checkbox" name="acl_permission[]" value="d" data-id="2">
<label for="check_permisssion_delete2" class="label-success"></label>
</div>
</li>
<li class="list-group-item">
Execute
<div class="material-switch pull-right">
<input id="check_permisssion_execute2" class="acl_permission" type="checkbox" name="acl_permission[]" value="e" data-id="2">
<label for="check_permisssion_execute2" class="label-success"></label>
</div>
</li>
acl_funcion1
<li class="list-group-item">
Read
<div class="material-switch pull-right">
<input id="check_permisssion_read3" class="acl_permission" type="checkbox" name="acl_permission[]" value="r" data-id="3">
<label for="check_permisssion_read3" class="label-success"></label>
</div>
</li>
<li class="list-group-item">
Write
<div class="material-switch pull-right">
<input id="check_permisssion_write3" class="acl_permission" type="checkbox" name="acl_permission[]" value="w" data-id="3">
<label for="check_permisssion_write3" class="label-success"></label>
</div>
</li>
<li class="list-group-item">
Delete
<div class="material-switch pull-right">
<input id="check_permisssion_delete3" class="acl_permission" type="checkbox" name="acl_permission[]" value="d" data-id="3">
<label for="check_permisssion_delete3" class="label-success"></label>
</div>
</li>
<li class="list-group-item">
Execute
<div class="material-switch pull-right">
<input id="check_permisssion_execute3" class="acl_permission" type="checkbox" name="acl_permission[]" value="e" data-id="3">
<label for="check_permisssion_execute3" class="label-success"></label>
</div>
</li>
So when I click on save button, I need to get checked checkboxes but grouped by data-id, how can I get this?
I only got looping all checkboxes and checking if is checked, if is, return data-id+value (1r, 1w...) for example.
var checkboxes = $('.acl_permission');
checkboxes.each(function(idx, el){
if ($(this).is(':checked')) {
console.log($(this).data('id') + $(this).val())
}
});
But like this, im getting:
1r
1w
2r
2w
3w
I would like to get something like:
[{data-id: 1, permissions: 'rw'}, {data-id: 2, permissions: 'rw'}, {data-id: 3, permissions: 'w'}] based on data-id (controller id) and permissions checked on that data-id (r,w,d,e).
Thanks!!

Your steps:
Add data-group attribute to your checkboxes
Create a dictionary var permissions = { groupId: permissionString }
On your loop : if permissions contains key with groupId add permission key to permissionString else add new groupId with permissionString
var checkboxes = $('.acl_permission');
var permissionDictionary = {};
checkboxes.each(function(idx, el){
if ($(this).is(':checked')) {
var groupId = $(this).attr('data-id')
if !permissionDictionary[groupId] {
permissionDictionary[groupId] = ""
}
permissionDictionary[groupId] = permissionDictionary[groupId] + $(this).val()
}
});

Create a temporary object whose keys are the data_id and values are the permissions. Then Use Object.keys() to map() final results from that object
var tmp ={};
$('.acl_permission:checked').each(function(){
var data_id = $(this).data('id');
if(!tmp[data_id]) {
tmp[data_id] =''
}
tmp[data_id]+= this.value
});
var res = Object.keys(tmp).map((key)=> ({data_id: key, permissions: tmp[key]}));
console.log(res)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group">
home
<li class="list-group-item">
Read
<div class="material-switch pull-right">
<input id="check_permisssion_read1" class="acl_permission" type="checkbox" name="acl_permission[]" value="r" data-id="1" checked>
<label for="check_permisssion_read1" class="label-success"></label>
</div>
</li>
<li class="list-group-item">
Write
<div class="material-switch pull-right">
<input id="check_permisssion_write1" class="acl_permission" type="checkbox" name="acl_permission[]" value="w" data-id="1" checked>
<label for="check_permisssion_write1" class="label-success"></label>
</div>
</li>
<li class="list-group-item">
Delete
<div class="material-switch pull-right">
<input id="check_permisssion_delete1" class="acl_permission" type="checkbox" name="acl_permission[]" value="d" data-id="1">
<label for="check_permisssion_delete1" class="label-success"></label>
</div>
</li>
<li class="list-group-item">
Execute
<div class="material-switch pull-right">
<input id="check_permisssion_execute1" class="acl_permission" type="checkbox" name="acl_permission[]" value="e" data-id="1" checked>
<label for="check_permisssion_execute1" class="label-success"></label>
</div>
</li>
acl
<li class="list-group-item">
Read
<div class="material-switch pull-right">
<input id="check_permisssion_read2" class="acl_permission" type="checkbox" name="acl_permission[]" value="r" data-id="2">
<label for="check_permisssion_read2" class="label-success"></label>
</div>
</li>
<li class="list-group-item">
Write
<div class="material-switch pull-right">
<input id="check_permisssion_write2" class="acl_permission" type="checkbox" name="acl_permission[]" value="w" data-id="2" checked>
<label for="check_permisssion_write2" class="label-success"></label>
</div>
</li>
<li class="list-group-item">
Delete
<div class="material-switch pull-right">
<input id="check_permisssion_delete2" class="acl_permission" type="checkbox" name="acl_permission[]" value="d" data-id="2">
<label for="check_permisssion_delete2" class="label-success"></label>
</div>
</li>
<li class="list-group-item">
Execute
<div class="material-switch pull-right">
<input id="check_permisssion_execute2" class="acl_permission" type="checkbox" name="acl_permission[]" value="e" data-id="2" checked>
<label for="check_permisssion_execute2" class="label-success"></label>
</div>
</li>
acl_funcion1
<li class="list-group-item">
Read
<div class="material-switch pull-right">
<input id="check_permisssion_read3" class="acl_permission" type="checkbox" name="acl_permission[]" value="r" data-id="3">
<label for="check_permisssion_read3" class="label-success"></label>
</div>
</li>
<li class="list-group-item">
Write
<div class="material-switch pull-right">
<input id="check_permisssion_write3" class="acl_permission" type="checkbox" name="acl_permission[]" value="w" data-id="3" checked>
<label for="check_permisssion_write3" class="label-success"></label>
</div>
</li>
<li class="list-group-item">
Delete
<div class="material-switch pull-right">
<input id="check_permisssion_delete3" class="acl_permission" type="checkbox" name="acl_permission[]" value="d" data-id="3" checked>
<label for="check_permisssion_delete3" class="label-success"></label>
</div>
</li>
<li class="list-group-item">
Execute
<div class="material-switch pull-right">
<input id="check_permisssion_execute3" class="acl_permission" type="checkbox" name="acl_permission[]" value="e" data-id="3">
<label for="check_permisssion_execute3" class="label-success"></label>
</div>
</li>
</ul>

I think you can try to do something like this
function showResult() {
let result = {};
$("div[id^='group-']").each((index, group) => {
$(group).find("input").each((index, permission) => {
if (!result[group.id]) {
result[group.id] = {};
}
result[group.id][permission.id] = permission.checked;
});
})
console.log(result);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="group-g1">
<input type="checkbox" id="r" /> read
<input type="checkbox" id="w" /> write
</div>
<div id="group-g2">
<input type="checkbox" id="r" /> read
<input type="checkbox" id="w" /> write
</div>
<input type="button" onClick="showResult()" value="Click Me">

Try this .push the object with inside the each function .And add the data_id instead of data-id .
if you need to update the array with each time click .try with onchange event like this
$('.acl_permission').click(function(){
var res = [];
var checkboxes = $('.acl_permission');
checkboxes.each(function(idx, el) {
if ($(this).is(':checked')) {
var some = res.map(a => a.data_id)
if (some.includes($(this).data('id'))) {
res.forEach(a =>
{ if (a.data_id == $(this).data('id')) {
a.permissions = a.permissions + $(this).val()
}})
} else {
res.push({
data_id: $(this).data('id'),
permissions: $(this).val()
})
}
}
});
console.log(res)
})
Updated
var res = [];
var checkboxes = $('.acl_permission');
checkboxes.each(function(idx, el) {
if ($(this).is(':checked')) {
var some = res.map(a => a.data_id) //validate the data_id exist
if (some.includes($(this).data('id'))) {
res.forEach(a =>
{ if (a.data_id == $(this).data('id')) {
a.permissions = a.permissions + $(this).val()//append to permission on exsit data_id permissions
}})
} else {
res.push({ //its new data_id push with array
data_id: $(this).data('id'),
permissions: $(this).val()
})
}
}
});
console.log(res)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group">
home
<li class="list-group-item">
Read
<div class="material-switch pull-right">
<input id="check_permisssion_read1" class="acl_permission" type="checkbox" name="acl_permission[]" value="r" data-id="1" checked>
<label for="check_permisssion_read1" class="label-success"></label>
</div>
</li>
<li class="list-group-item">
Write
<div class="material-switch pull-right">
<input id="check_permisssion_write1" class="acl_permission" type="checkbox" name="acl_permission[]" value="w" data-id="1">
<label for="check_permisssion_write1" class="label-success"></label>
</div>
</li>
<li class="list-group-item">
Delete
<div class="material-switch pull-right">
<input id="check_permisssion_delete1" class="acl_permission" type="checkbox" name="acl_permission[]" value="d" data-id="1" checked>
<label for="check_permisssion_delete1" class="label-success"></label>
</div>
</li>
<li class="list-group-item">
Execute
<div class="material-switch pull-right">
<input id="check_permisssion_execute1" class="acl_permission" type="checkbox" name="acl_permission[]" value="e" data-id="1">
<label for="check_permisssion_execute1" class="label-success"></label>
</div>
</li>
acl
<li class="list-group-item">
Read
<div class="material-switch pull-right">
<input id="check_permisssion_read2" class="acl_permission" type="checkbox" name="acl_permission[]" value="r" data-id="2">
<label for="check_permisssion_read2" class="label-success"></label>
</div>
</li>
<li class="list-group-item">
Write
<div class="material-switch pull-right">
<input id="check_permisssion_write2" class="acl_permission" type="checkbox" name="acl_permission[]" value="w" data-id="2">
<label for="check_permisssion_write2" class="label-success"></label>
</div>
</li>
<li class="list-group-item">
Delete
<div class="material-switch pull-right">
<input id="check_permisssion_delete2" class="acl_permission" type="checkbox" name="acl_permission[]" value="d" data-id="2">
<label for="check_permisssion_delete2" class="label-success"></label>
</div>
</li>
<li class="list-group-item">
Execute
<div class="material-switch pull-right">
<input id="check_permisssion_execute2" class="acl_permission" type="checkbox" name="acl_permission[]" value="e" data-id="2">
<label for="check_permisssion_execute2" class="label-success"></label>
</div>
</li>
acl_funcion1
<li class="list-group-item">
Read
<div class="material-switch pull-right">
<input id="check_permisssion_read3" class="acl_permission" type="checkbox" name="acl_permission[]" value="r" data-id="3">
<label for="check_permisssion_read3" class="label-success"></label>
</div>
</li>
<li class="list-group-item">
Write
<div class="material-switch pull-right">
<input id="check_permisssion_write3" class="acl_permission" type="checkbox" name="acl_permission[]" value="w" data-id="3">
<label for="check_permisssion_write3" class="label-success"></label>
</div>
</li>
<li class="list-group-item">
Delete
<div class="material-switch pull-right">
<input id="check_permisssion_delete3" class="acl_permission" type="checkbox" name="acl_permission[]" value="d" data-id="3">
<label for="check_permisssion_delete3" class="label-success"></label>
</div>
</li>
<li class="list-group-item">
Execute
<div class="material-switch pull-right">
<input id="check_permisssion_execute3" class="acl_permission" type="checkbox" name="acl_permission[]" value="e" data-id="3">
<label for="check_permisssion_execute3" class="label-success"></label>
</div>
</li>

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/

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

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

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

Categories