jQuery each loop give only first result - javascript

I am trying to generate an array to be submitted to an ajax call via jQuery. Here is my HTML and JavaScript:
//Following is the JavaScript I use to generate the variables from checked checkboxes
jQuery(document).on("click", ".refno", function() {
var ref = jQuery(this).data("ref");
var refindex = jQuery(this).data("refindex");
var i = 0;
var tutelists = [];
var tutearray = {};
jQuery('.datarefindex_' + refindex).each(function() {
var subjid = jQuery(this).data("subjid");
i++;
tutearray["id"] = subjid;
tutearray["issuedtutes"] = jQuery("input[name=tuteset_" + refindex + "_" + subjid + "]:checked").map(function() {
return this.value;
}).get();
});
tutelists.push(tutearray);
var tutelists = JSON.stringify(tutelists);
jQuery("#responsecontainer").html(tutelists);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
1105898
<ul>
<li>
<div>Title 1</div>
<ul class="datarefindex_1" data-subjid="opt471821">
<li>
<label class="tutebtn" for="1_opt471821_1">
<input name="tuteset_1_opt471821" data-mainrefindex="1" type="checkbox" id="1_opt471821_1" data-subj="opt471821" value="1"> 1</label>
</li>
<li>
<label class="tutebtn" for="1_opt471821_2">
<input name="tuteset_1_opt471821" data-mainrefindex="1" type="checkbox" id="1_opt471821_2" data-subj="opt471821" value="2"> 2</label>
</li>
</ul>
</li>
<li>
<div>Title 2</div>
<ul class="datarefindex_1" data-subjid="opt1215754">
<li>
<label class="tutebtn" for="1_opt1215754_1">
<input name="tuteset_1_opt1215754" data-mainrefindex="1" type="checkbox" id="1_opt1215754_1" data-subj="opt1215754" value="1"> 1</label>
</li>
<li>
<label class="tutebtn" for="1_opt1215754_2">
<input name="tuteset_1_opt1215754" data-mainrefindex="1" type="checkbox" id="1_opt1215754_2" data-subj="opt1215754" value="2"> 2</label>
</li>
</ul>
</li>
<li>
<div>Title 3</div>
<ul class="datarefindex_1" data-subjid="opt3062581">
<li>
<label class="tutebtn" for="1_opt3062581_1">
<input name="tuteset_1_opt3062581" data-mainrefindex="1" type="checkbox" id="1_opt3062581_1" data-subj="opt3062581" value="1"> 1</label>
</li>
<li>
<label class="tutebtn" for="1_opt3062581_2">
<input name="tuteset_1_opt3062581" data-mainrefindex="1" type="checkbox" id="1_opt3062581_2" data-subj="opt3062581" value="2"> 2</label>
</li>
</ul>
</li>
</ul>
<div id="responsecontainer"></div
>
The result I receive is as follows (I have checked the first 3 boxes in each list);
{"id":"opt3062581","issuedtutes1":["1","2","3"],
"issuedtutes2":["1","2","3"],
"issuedtutes3":["1","2","3"]}
However the desired result is as follows;
{"id":"opt471821","issuedtutes":["1","2","3"]},
{"id":"opt1215754","issuedtutes":["1","2","3"]},
{"id":"opt3062581","issuedtutes":["1","2","3"]}
Couldn't figure out what am I missing. When i remove the id part from the function, this returns {"id":"opt3062581","issuedtutes":["1","2","3"]} which is the data from the last list. Please help.
Number of tute lists is dynamic and not fixed.


Your expected output looks like a list of objects, so tutelists should be a list not an object.
jQuery(document).on("click", ".refno", function() {
var ref = jQuery(this).data("ref");
var refindex = jQuery(this).data("refindex");
var i = 0;
var tutelists = [];
jQuery('.datarefindex_' + refindex).each(function() {
var subjid = jQuery(this).data("subjid");
i++;
var tutearray = {};
tutearray["id"] = subjid;
tutearray["issuedtutes"] = jQuery("input[name=tuteset_" + refindex + "_" + subjid + "]:checked").map(function() {
return this.value;
}).get();
tutelists.push(tutearray);
});
var tutelists = JSON.stringify(tutelists);
jQuery("#responsecontainer").html(tutelists);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
1105898
<ul>
<li>
<div>Title 1</div>
<ul class="datarefindex_1" data-subjid="opt471821">
<li>
<label class="tutebtn" for="1_opt471821_1">
<input name="tuteset_1_opt471821" data-mainrefindex="1" type="checkbox" id="1_opt471821_1" data-subj="opt471821" value="1"> 1</label>
</li>
<li>
<label class="tutebtn" for="1_opt471821_2">
<input name="tuteset_1_opt471821" data-mainrefindex="1" type="checkbox" id="1_opt471821_2" data-subj="opt471821" value="2"> 2</label>
</li>
</ul>
</li>
<li>
<div>Title 2</div>
<ul class="datarefindex_1" data-subjid="opt1215754">
<li>
<label class="tutebtn" for="1_opt1215754_1">
<input name="tuteset_1_opt1215754" data-mainrefindex="1" type="checkbox" id="1_opt1215754_1" data-subj="opt1215754" value="1"> 1</label>
</li>
<li>
<label class="tutebtn" for="1_opt1215754_2">
<input name="tuteset_1_opt1215754" data-mainrefindex="1" type="checkbox" id="1_opt1215754_2" data-subj="opt1215754" value="2"> 2</label>
</li>
</ul>
</li>
<li>
<div>Title 3</div>
<ul class="datarefindex_1" data-subjid="opt3062581">
<li>
<label class="tutebtn" for="1_opt3062581_1">
<input name="tuteset_1_opt3062581" data-mainrefindex="1" type="checkbox" id="1_opt3062581_1" data-subj="opt3062581" value="1"> 1</label>
</li>
<li>
<label class="tutebtn" for="1_opt3062581_2">
<input name="tuteset_1_opt3062581" data-mainrefindex="1" type="checkbox" id="1_opt3062581_2" data-subj="opt3062581" value="2"> 2</label>
</li>
</ul>
</li>
</ul>
<div id="responsecontainer"></div
>


Your id value will be replaced with new newer one. Please try to use push() method of array to make it workable.
jQuery(document).on("click", ".refno", function () {
var ref = jQuery(this).data("ref");
var refindex = jQuery(this).data("refindex");
var i = 0;
var tutelists =[];
tutelistElement = {};
jQuery('.datarefindex_'+ refindex ).each(function(){
var subjid = jQuery(this).data("subjid");
i++;
tutelistElement["id"] = subjid;
tutelistElement["issuedtutes"+i] = jQuery("input[name=tuteset_"+refindex+"_"+subjid+"]:checked").map(function () { return this.value; }).get();
});
tutelists.push(tutelistElement);
var tutelists = JSON.stringify(tutelists);
jQuery("#responsecontainer").html(tutelists);
});

Related

Get to the child element of input tag

I am trying to get to <label> tag right under the <input> tag for later styling purposes. I tried with .firstElementChild, which gives me a null value. How can I get to label tag of clicked checkbox field? This is my code:
var checkboxes = document.querySelectorAll("input[type='checkbox']");
for (var i = 0; i < checkboxes.length; i++) {
console.log(checkboxes[i]);
checkboxes[i].addEventListener('change', (e) => {
var targetCb = e.target;
console.log(targetCb.firstElementChild);
});
}
<ul>
<li class="title mb-3">STYLISTIC SET</li>
<li>
<input type="checkbox" id="sSet1" name="sSet1" value="sSet1" />
<label for="sSet1">Stylistic set 1</label>
</li>
<li>
<input type="checkbox" id="sSet2" name="sSet2" value="sSet2" />
<label for="sSet2">Stylistic set 2</label>
</li>
<li>
<input type="checkbox" id="sSet3" name="sSet3" value="sSet3" />
<label for="sSet3">Stylistic set 3</label>
</li>
<li>
<input type="checkbox" id="sSet4" name="sSet4" value="sSet4" />
<label for="sSet4">Stylistic set 4</label>
</li>
</ul>

It seems like you quite don't know what child elements and siblings are.
Consider the following for children:
<div id="parent">
<div id="child">I'm the child of my parent.</div>
</div>
And the following for siblings:
<div id="sibling1"></div>
<div id="sibling2">I'm the sibling of sibling1.</div>
In your code, those labels are siblings of your input elements.
So in your script, change console.log(targetCb.firstElementChild); to console.log(targetCb.nextElementSibling);
var checkboxes = document.querySelectorAll("input[type='checkbox']");
for (var i = 0; i < checkboxes.length; i++) {
console.log(checkboxes[i]);
checkboxes[i].addEventListener('change', (e) => {
var targetCb = e.target;
console.log(targetCb.nextElementSibling);
});
}
<ul>
<li class="title mb-3">STYLISTIC SET</li>
<li>
<input type="checkbox" id="sSet1" name="sSet1" value="sSet1" />
<label for="sSet1">Stylistic set 1</label>
</li>
<li>
<input type="checkbox" id="sSet2" name="sSet2" value="sSet2" />
<label for="sSet2">Stylistic set 2</label>
</li>
<li>
<input type="checkbox" id="sSet3" name="sSet3" value="sSet3" />
<label for="sSet3">Stylistic set 3</label>
</li>
<li>
<input type="checkbox" id="sSet4" name="sSet4" value="sSet4" />
<label for="sSet4">Stylistic set 4</label>
</li>
</ul>

Change
var targetCb = e.target;
to var targetCb = e.target.nextElementSibling;

Pass Value of Radio Button Multiple Times

I am working on some code that takes the selected value of the radio button and passes it to the next group of radio buttons to be used as input. The code works well when passing the first time, but any subsequent time, instead of passing the value, it passes "on." I think it's just something silly, but I haven't been able to figure it out.
Link to JS Fiddle: https://jsfiddle.net/hc3bracf/6/
Here is the HTML and JS:
<div class="container">
<ul class="aaa">
<li>
<input type="radio" name="g1" id="i1" value="s#1" data-target="r65">
<label id="r1" for="i1">s#1</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li>
<input type="radio" name="g1" id="i2" value="s#16" data-target="r65">
<label id="r2" for="i2">s#16</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
</ul>
</div>
<div class="container">
<ul class="aaa">
<li>
<input type="radio" name="g2" id="i3" value="s#8" data-target="r66">
<label id="r3" for="i3">s#8</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li>
<input type="radio" name="g2" id="i4" value="s#9" data-target="r66">
<label id="r4" for="i4">s#9</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
</ul>
</div>
<div class="container">
<ul class="aaa">
<li>
<input type="radio" name="g33" id="i65" data-target="r97">
<label id="r65" for="i65"></label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li>
<input type="radio" name="g33" id="i66" data-target="r97">
<label id="r66" for="i66"></label>
<div class="check">
<div class="inside"></div>
</div>
</li>
</ul>
</div>
<div class="container">
<ul class="aaa">
<li>
<input type="radio" name="g49" id="i97" data-target="r113">
<label id="r97"></label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li>
<input type="radio" name="g49" id="i98" data-target="r113">
<label id="r98"></label>
<div class="check">
<div class="inside"></div>
</div>
</li>
</ul>
</div>
JS
const inputs = document.querySelectorAll("input[type=radio]");
for (let inp of inputs) {
inp.addEventListener("change", function() {
let targetLabel = document.getElementById(inp.dataset.target);
let targetRadio = targetLabel.previousSibling;
targetLabel.innerHTML = inp.value;
targetRadio.value = inp.value;
targetRadio.checked = false;
//while there is a next target clear it
while (targetLabel.previousSibling.hasAttribute) {
targetLabel = document.getElementById(targetRadio.dataset.target);
targetRadio = targetLabel.previousSibling;
targetRadio.checked = false;
targetLabel.innerHTML = '';
}
});
}

The previousSibling property returns the previous node of the specified node, in the same tree level.
The returned node is returned as a Node object.
The difference between this property and previousElementSibling, is that previousSibling returns the previous sibling node as an element node, a text node or a comment node, while previousElementSibling returns the previous sibling node as an element node (ignores text and comment nodes).
const inputs = document.querySelectorAll("input[type=radio]");
for (let inp of inputs) {
inp.addEventListener("change", function() {
let targetLabel = document.getElementById(inp.dataset.target);
console.log(targetLabel);
let targetRadio = targetLabel.previousElementSibling;
targetRadio.value = inp.value;
targetLabel.innerHTML = inp.value;
targetRadio.checked = false;
//while there is a next target clear it
while (targetLabel.previousElementSibling.hasAttribute) {
targetLabel = document.getElementById(targetRadio.dataset.target);
targetRadio = targetLabel.previousSibling;
targetRadio.checked = false;
targetLabel.innerHTML = '';
}
});
}

Angularjs / HTML Show and Hide li elements onClick

I am having a problem with the appearance of the "Categories" and their subordinate lists.
The lists should not be displayed when loading the page. So only be visible by a click of the user. Unfortunately, these list items disappear immediately as soon as a checkbox is selected. That should not happen. The content under "Categories" should only disappear or be made visible when the word Categories is clicked.
What changes do I have to make to make this work as I imagine?
Here's the HTML of the container it's about:
<div class="cd-filter-block" value="Show Hide Elements" data-ng-click="ShowHideCategory()" >
<h4 >Kategorien</h4>
<ul class="cd-filter-content cd-filters list" ng-show="IsVisibleCategory">
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Rind" data-ng-false-value="">
<label class="checkbox-label"> Rind </label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Geflügel" data-ng-false-value="">
<label class="checkbox-label">Geflügel</label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Schwein" data-ng-false-value="">
<label class="checkbox-label">Schwein</label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Schaf" data-ng-false-value="">
<label class="checkbox-label">Schaf</label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Wild" data-ng-false-value="">
<label class="checkbox-label">Wild</label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Ziege" data-ng-false-value="">
<label class="checkbox-label">Ziege</label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Pferd" data-ng-false-value="">
<label class="checkbox-label">Pferd</label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Alpaka" data-ng-false-value="">
<label class="checkbox-label">Alpaka</label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Fisch" data-ng-false-value="">
<label class="checkbox-label">Fisch</label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Kaninchen" data-ng-false-value="">
<label class="checkbox-label">Kaninchen</label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Mineral" data-ng-false-value="">
<label class="checkbox-label">Mineralfutter</label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Einzel" data-ng-false-value="">
<label class="checkbox-label">Einzelfutter</label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Spezial" data-ng-false-value="">
<label class="checkbox-label">Spezialfutter</label>
</li>
<li class="reset">
<p><strong><i class="fa fa-undo" aria-hidden="true"></i> Filter zurücksetzen</strong></p>
</li>
</ul> <!-- cd-filter-content -->
</div> <!-- cd-filter-block -->
And here are the excerpts from the script file:
app.controller('PageCtrl', ['$scope', 'filterFilter', '$http', function ($scope, filterFilter, $http) {
$scope.items =[];
$http.get("document.json").success(function(response){
$scope.items = response; //ajax request to fetch data into $scope.data
// pagination controls
$scope.currentPage = 1;
$scope.totalItems = $scope.items.length;
$scope.entryLimit = 200; // items per page
$scope.noOfPages = Math.ceil($scope.totalItems / $scope.entryLimit);
$scope.orderByField = 'evaluation_result';
$scope.reverseSort = true;
$scope.IsVisibleCategory = false;
&scope.IsVisibleSubCategory = false;
&scope.IsVisibleComposition = false;
&scope.IsVisibleAnteile = false;
$scope.ShowHideCategory = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.IsVisibleCategory = $scope.IsVisibleCategory ? false : true;
};
$scope.ShowHideSubcategory = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.IsVisibleSubcategory = $scope.IsVisibleSubcategory ? false : true;
};
$scope.ShowHideComposition = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.IsVisibleComposition = $scope.IsVisibleComposition ? false : true;
};
$scope.ShowHideAnteile = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.IsVisibleAnteile = $scope.IsVisibleAnteile ? false : true;
};
});

The problem here is, that you set the ng-click on the containing div. So every click on a child, will trigger the ShowHideCategory() function.
Try moving the click handler to the actual word:
<div class="cd-filter-block" value="Show Hide Elements">
<h4 data-ng-click="ShowHideCategory()">Kategorien</h4>
[...]
Side note, not related to your question
In your ShowHide function, you could optimise your code a bit:
$scope.IsVisibleCategory = !$scope.IsVisibleCategory;

need Jquery foreach function to find out nested UL LI checked checkbox items

I need a jQuery function which iterates nested ul li components and find out the numbers which is defined in .ch class with checkboxes are checked and only those will be push in array.
<ul>
<li><input type="checkbox" name="one" value="one"><span class="ch">20</span>AS One</li>
<li><input type="checkbox" name="two" value="two"><span class="ch">43</span>AS Two</li>
<li><input type="checkbox" name="user_roles" value="user_roles"><span class="ch">93</span>Users & Roles <!-- SHOULD CHECK HERE -->
<ul>
<li><input type="checkbox" name="user_role" value="add"><span class="ch">15</span>Add</li>
<li><input type="checkbox" name="user_role" value="delete"><span class="ch">234</span>Delete</li> <!-- CHECK HERE -->
</ul>
</li>
</ul>
Full code
HTML
<ul class="tree" id="tree">
<li><input type="checkbox" name="account_settings" value="yes"><span class="ch">111</span>Account Settings <!-- AND SHOULD CHECK HERE -->
<ul>
<li><input type="checkbox" name="one" value="one"><span class="ch">20</span>AS One</li>
<li><input type="checkbox" name="two" value="two"><span class="ch">43</span>AS Two</li>
<li><input type="checkbox" name="user_roles" value="user_roles"><span class="ch">93</span>Users & Roles <!-- SHOULD CHECK HERE -->
<ul>
<li><input type="checkbox" name="user_role" value="add"><span class="ch">15</span>Add</li>
<li><input type="checkbox" name="user_role" value="delete"><span class="ch">234</span>Delete</li> <!-- CHECK HERE -->
</ul>
</li>
</ul>
</li>
<li><input type="checkbox" name="rl_module" value="yes"><span class="ch">199</span>RL Module</li>
<li><input type="checkbox" name="rl_module" value="yes"><span class="ch">154</span>Accounting
<ul>
<li><input type="checkbox" name="vat" value="yes"><span class="ch">122</span>VAT</li>
<li><input type="checkbox" name="bank_account" value="yes"><span class="ch">233</span>Banking
<ul>
<li><input type="checkbox" name="view" value="yes"><span class="ch">23</span>View</li>
<li><input type="checkbox" name="crud" value="yes"><span class="ch">12</span>CRUD</li>
</ul>
</li>
</ul>
</li>
</ul>
JavaScript
$('input[type=checkbox]').click(function(){
if(this.checked){
$(this).parents('li').children('input[type=checkbox]').prop('checked',true);
}
$(this).parent().find('input[type=checkbox]').prop('checked',this.checked);
});
var phrases = [];
$('.tree').each(function(){
var phrase = '';
$(this).find('li').each(function(){
var current = $(this);
if(current.children().size() > 0) {return true;}
phrase += $(this).text();
});
phrases.push(phrase);
});
// note the comma to separate multiple phrases
alert(phrases);
CSS
.ch {display:none}
JSFiddle link here

Demo: https://jsfiddle.net/qof1dxn7/
HTML:
<ul>
<li>
<input type="checkbox" name="one" value="one"><span class="ch">20</span>AS One</li>
<li>
<input type="checkbox" name="two" value="two"><span class="ch">43</span>AS Two</li>
<li>
<input type="checkbox" name="user_roles" value="user_roles"><span class="ch">93</span>Users & Roles
<!-- SHOULD CHECK HERE -->
<ul>
<li>
<input type="checkbox" name="user_role" value="add"><span class="ch">15</span>Add</li>
<li>
<input type="checkbox" name="user_role" value="delete"><span class="ch">234</span>Delete</li>
<!-- CHECK HERE -->
</ul>
</li>
</ul>
JS
$(function() {
$('input:checkbox').change(function() {
var arr = [];
$('input:checked').each(function () {
arr.push( parseInt($(this).next('.ch').text()) );
});
console.log(arr);
});
});

$('input').on('change', function () {
var numbers = '';
$('input:checked').each(function () {
numbers += $(this).next('.ch').text() + ', ';
});
alert(numbers);
});
jsFiddle: http://jsfiddle.net/Z82FR/34/

fetching checkbox multidimensional array in javascript

As per the requirement i have to create xhtml dynamically as described below
<ul class="checklist">
<li>
<input type="checkbox" name="level[1]" value="1" onclick="checkAll(this)" id="level[1]">
<label for="level[1]">Unit 1</label>
<ul class="subchecklist">
<li>
<input type="checkbox" checked="checked" name="courses[1][1]" value="1" onclick="checkTop()" id="courses[1][1]">
<label for="courses[1][1]">Module 1</label>
</li>
<li>
<input type="checkbox" checked="checked" name="courses[1][2]" value="2" onclick="checkTop()" id="courses[1][2]">
<label for="courses[1][2]">Module 2</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" name="level[2]" value="2" onclick="checkAll(this)" id="level[2]">
<label for="level[2]">Unit 2</label>
<ul class="subchecklist">
<li>
<input type="checkbox" checked="checked" name="courses[2][1]" value="1" onclick="checkTop()" id="courses[2][1]">
<label for="courses[2][1]">Module 1</label>
</li>
<li>
<input type="checkbox" checked="checked" name="courses[2][2]" value="2" onclick="checkTop()" id="courses[2][2]">
<label for="courses[2][2]">Module 2</label>
</li>
</ul>
</li>
</ul>
I want to check / Uncheck all module checkboxes on the selection of its associated parent level. Here is my javascript function.
function checkAll(obj){
var element = document.accessForm.elements["courses["+obj.value+"]"];
alert(element);
if(obj.checked){
for(i=0;i<element.length;i++){
element[i].checked = true;
}
}else{
for(i=0;i<element.length;i++){
element[i].checked = false;
}
}
}
But when i display element variable then get the response "Undefined".
Can anybody please help

use this function:
function checkAll(obj){
var element = [];
var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++)
{
if(inputs[i].name.indexOf('courses[' + obj.value + ']') == 0)
{
element.push(inputs[i]);
}
}
if(obj.checked){
for(i=0;i<element.length;i++){
element[i].checked = true;
}
}else{
for(i=0;i<element.length;i++){
element[i].checked = false;
}
}
}

add this function to your code:
function checkTop(obj)
{
var temp = obj.name;
var first_index1 = temp.indexOf('[');
var first_index2 = temp.indexOf(']');
temp = temp.substring(first_index1 + 1, first_index2);
var element = [];
var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++)
{
if(inputs[i].name.indexOf('courses[' + temp + ']') == 0)
{
element.push(inputs[i]);
}
}
var count_checked = 0;
var count_not_checked = 0;
for(var i = 0; i < element.length; i++)
{
if (element[i].checked)
count_checked++;
else
count_not_checked++;
}
var parent = document.getElementById("level[" + temp + "]");
if (count_checked == element.length)
{
parent.checked = true;
}
if (count_not_checked == element.length)
{
parent.checked = false;
}
}
and change html code to this:
<ul class="checklist">
<li>
<input type="checkbox" name="level[1]" value="1" onclick="checkAll(this)" id="level[1]">
<label for="level[1]">Unit 1</label>
<ul class="subchecklist">
<li>
<input type="checkbox" checked="checked" name="courses[1][1]" value="1" onclick="checkTop(this)" id="courses[1][1]">
<label for="courses[1][1]">Module 1</label>
</li>
<li>
<input type="checkbox" checked="checked" name="courses[1][2]" value="2" onclick="checkTop(this)" id="courses[1][2]">
<label for="courses[1][2]">Module 2</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" name="level[2]" value="2" onclick="checkAll(this)" id="level[2]">
<label for="level[2]">Unit 2</label>
<ul class="subchecklist">
<li>
<input type="checkbox" checked="checked" name="courses[2][1]" value="1" onclick="checkTop(this)" id="courses[2][1]">
<label for="courses[2][1]">Module 1</label>
</li>
<li>
<input type="checkbox" checked="checked" name="courses[2][2]" value="2" onclick="checkTop(this)" id="courses[2][2]">
<label for="courses[2][2]">Module 2</label>
</li>
</ul>
</li>
</ul>
I'm sure it helps!

Categories