Thanks for the tutorial. I do like the use of the two buttons rather than using just another check box to select and unselect all, it avoids the issue of the dynamic checks values not clearing when using form reset. Which is the only bug. Basically the tutorial unselect all button is the form reset.
I may convert mine to buttons for that reason, or just use the tutorial as a model for a custom reset button.
Mine is not that hard to understand, its actually quite simple. Mine is also performing more tasks than the tutorial version. However, i fully admit that my version is heavy on js because of my limited js skills.
Just a quick walk through on my version.
1. we use a IIFE (in simple terms its a open js that is listening all the time) and it carries the document with in the (pd) which i named it that in short for privacy document.
2. we preset our vars and then listen for the click event, but this click event is only targed to those items clicked that have the .limit class assigned to them (class="limit"). I did not know if i was required to have an actual class with that name or not in css but i made one anyway and just put something in it.
3. Once a click happens on a limit class item we store a few values that we need later:
The current target which is the input element of the item clicked.
That id
That value - its easier to store and check for numbers than for text IMO so i need to convert the number values to text values because the text values are part of the id names and we use that later.
And then i grab a copy of the element to use later.
Now i do realize here that i could have probably used the current target var rather than make a new var but i did not see that until now.. 4. Then we store how many are checked currently in the top section, remember its always listening so it reacts on its own without calling a function. There are two sections of the html the Act short for Activity section on top and the Feat (aka individual feature) items on the bottom.
5. If the number of items checked on the top section is greater than 1 (remember that is our limit 1 top and 1 bottom) and we see that the checked value is true (its checked) then we remove the checked attribute. Example we remove the dynamic checked="checked" attribute because we dont want to block the click. And we send them a message on the screen as a reminder. And then we return, basically stopping the process.
6. We repeat the same process for the bottom section as we did for the top section in #5 above.
7. We calculate the total of (select all checkboxes) that are checked and store them in cbcount var.
8. if the total count is more than the limit. On the first part of this is where the internal documentation says that this may never be executed. We repeat the process of the above 5 and 6 above. This was part of my original logic and rather than remove it i just left it there as a failsafe just in case, but it can probably be removed, ill have to check it again to be sure.
9. Now during the rest of this i do recheck some flags that i may not have to but again that is my wanting to be sure because remember i am coding for privacy, and if this gets messed up then well you know, its not private so i would rather error on the side of more code than less code.
10. So they have not reached the limit (they have one checked but not 2. So since they just checked this one item we need to dynamically create the checked="checked" attribute. Remember this process of creating and removing is ongoing and every time they check and uncheck a select all item, it repeats the process of creating and removing.
11. Then we recheck the count, i can probably remove that, we really dont need to do that again at this point, again part of my original logic, so yeah that can probably be removed as we recount anyway on the next click.
12. Now we check the text for the id name to see which section the click came from, top or bottom. And then we send them to the appropriate function below (including the value of the column they selected, ie private, friends only, everyone.... ) to the function and in that function we set all those items to checked.
13 We repeat the process if they unchecked the box so if the value of checked is false then that means the box is not checked.
And thats it, the functions below do the main tasks of selecting and unselecting. I hope this makes better sense now. Yes alittle on the js fat side but not too bad for a js novice like myself
UPDATE: i have made the following corrections to the code and replaced the posted code with the new code.
1. i removed the var ch_el and just used curTarg var, i changed out all occurances of ch_el with curTarg since its the same thing.
2. i removed the count check on line 170, its not needed.
3. the if(curTarg) check on line 162 should be moved up above the if(curTarg.checked) which is right above it.. and its else clause on 217 should be moved to match. The reason is that you want to check for curTarg first before anything else.