I am currently in the process of creating interactive checklists.
One feature I have implemented is changing the color of a header if all checkboxes associated with it are checked, as shown below:
$("input[type='checkbox']").click(function(){
if(($(this).attr('name'))=="check1"){
maxchecked1 = $('[name="check1"]').length;
curchecked1 = $('[name="check1"]:checked').length;
console.log("First check"+curchecked1+"/"+maxchecked1);
if(maxchecked1==curchecked1){
console.log("all checked");
$("#head1 a").addClass('ccomplete');
}else{
$("#head1 a").removeClass('ccomplete');
}
}
The corresponding CSS code is:
.ccomplete{
background:#66BC29 !important;
}
This functionality is working perfectly.
In addition to this, I would like to perform a similar test on elements that change color, in order to indicate when ALL the checklists are complete.
To achieve this, I attempted the following:
var heads_done = $(".checkhead a").css("background-color" , "#66BC29");
var heads_total = $(".checkhead a").length;
The goal is to compare 'heads_done' with 'heads_total.'
However, the initial line of code seems inaccurate and I am struggling to find a solution. Essentially, I need to determine the number of elements in the array .checkhead[] (similar to check1) that have the new color.
Is there a way to accomplish this task?