[JS] Meerdere Select all Checkboxen op 1 pagina

[digital-IMEI]

Hey mensen,

ik ben nog pas begonnen met het gebruiken van JS dus excuus als ik er niets van bak

Ik zit met het volgende probleem, ik heb een intranet pagina waar alle personeel op staat, met daarbij de behorende afdeling. Nu wil ik het graag zo hebben dat op het moment dat ik een afdeling selecteer direct alle onderliggende personeel ook geselecteerd wordt.
Tot zover geen probleem.

Maar het probleem komt op het moment dat ik een 2e afdeling erbij wil selecteren, dan gebeurt er niets tot het moment dat ik die 2e afdeling deselecteer, dan wordt alle onderliggend personeel juist geselecteerd. Vanaf de 2e selectie werkt het dus eigenlijk verkeerd om.....

De JS code: (standaard)

JavaScript:

<script type="text/javascript" language="javascript"> 
var checkflag = "false";
function check(field) {
if (checkflag == "false") {
for (i = 0; i < field.length; i++) {
field[i].disabled = true;
field[i].checked = true;}
checkflag = "true";
return "Uncheck All"; }
else {
for (i = 0; i < field.length; i++) {
field[i].disabled = false;
field[i].checked = false; }
checkflag = "false";

return "Check All"; }
}
</script>

Het probleem zit hem in de variabele checkflag maar ik heb geen idee hoe ik dit moet oplossen.

Hier de checkbox die dus vaker voorkomt binnen 1 pagina:

HTML:

<input type='checkbox' name='1' onClick='this.value=check(this.form.".$var.")'>

Als iemand mij wat verder kan helpen heel graag!!!

[Jochemmol]

Sjengcity schreef op vrijdag 08 augustus 2008 @ 10:23:
Het probleem zit hem in de variabele checkflag maar ik heb geen idee hoe ik dit moet oplossen.

Hier de checkbox die dus vaker voorkomt binnen 1 pagina:

code:

<input type='checkbox' name='1' onClick='this.value=check(this.form.".$var.")'>

Ik begrijp niet zo goed wat er in $var staat.

Je zou ipv checkflag ook gewoon aan de functie check kunnen meegeven of je checkt of uncheckt (this.checked/document.getElementById('elementID').checked)
Dan heb je die checkflag niet nodig

[ Voor 5% gewijzigd door Jochemmol op 08-08-2008 10:49 ]

[digital-IMEI]

Ok, ik ben alweer wat verder.

Op het moment dat ik 1 afdeling selecteer wordt de variabele checkflag omgezet naar true. Nu wordt mijn vraag dus eigenlijk hoe ik voor JS zichtbaar kan maken dat dat alleen voor 1 afdeling is.
Of is er misschien een mogelijkheid dat ik de "afdelingscheckbox" de variabele checkflag = false mee geef en dat deze pas wordt uitgevoerd bij het aanvinken van de checkbox?

iets in de trend van:

code:

<input......onClick='this.value=check(this.form.".$var.") var checkflag=false'>

[mr_derk]

Sjengcity schreef op vrijdag 08 augustus 2008 @ 10:49:
Ok, ik ben alweer wat verder.

Op het moment dat ik 1 afdeling selecteer wordt de variabele checkflag omgezet naar true. Nu wordt mijn vraag dus eigenlijk hoe ik voor JS zichtbaar kan maken dat dat alleen voor 1 afdeling is.
Of is er misschien een mogelijkheid dat ik de "afdelingscheckbox" de variabele checkflag = false mee geef en dat deze pas wordt uitgevoerd bij het aanvinken van de checkbox?

iets in de trend van:

code:

<input......onClick='this.value=check(this.form.".$var.") var checkflag=false'>

waarom niet in de functie meegeven als parameter? Op die manier draag je geen variabele over

trouwens je kan voor je waardes "false" en "true" beter booleans gebruiken, staat wat professioneler

[digital-IMEI]

Jochemmol schreef op vrijdag 08 augustus 2008 @ 10:48:
[...]

Ik begrijp niet zo goed wat er in $var staat.

Je zou ipv checkflag ook gewoon aan de functie check kunnen meegeven of je checkt of uncheckt (this.checked/document.getElementById('elementID').checked)
Dan heb je die checkflag niet nodig

in $var staat de afdeling, deze komt ook weer terug bij het onderliggende personeel zodat alleen het personeel wat onder een afdeling valt wordt geselecteerd.

code:

<input type='checkbox' name=". $var." value='1'>

Ik ga eens even naar dat check ipv checkflag gebeuren kijken, begrijp er nog even niets van maar daar hebben we google voor

alvast bedankt!

[Jochemmol]

Als ik jou goed begrijp wil je het volgende.

Je heb een rij checkboxen voor de afdelingen.
Daarnaast een rij checkboxen voor het personeel.

Als je 1 of meerdere afdelingen aavinkt wil je dat de checkboxen van het personeel aangevinkt worden?

Je heb dus een koppeling tussen de afdeling checkbox en de personeel checkboxen.
Als je in de onclick de checked status van de afdeling checkbox meegeeft weet je ook of je moet checken of unchecken.

de .checked state geeft een true of false terug. Zo weet je dus per afdelingscheckbox welke actie je moet uitvoeren

[digital-IMEI]

waarom niet in de functie meegeven als parameter? Op die manier draag je geen variabele over

zoals gezegt, mij JS kennis is nog zeer beperkt

---

Jochemmol schreef op vrijdag 08 augustus 2008 @ 10:54:
Als ik jou goed begrijp wil je het volgende.

Je heb een rij checkboxen voor de afdelingen.
Daarnaast een rij checkboxen voor het personeel.

Als je 1 of meerdere afdelingen aavinkt wil je dat de checkboxen van het personeel aangevinkt worden?

Je heb dus een koppeling tussen de afdeling checkbox en de personeel checkboxen.
Als je in de onclick de checked status van de afdeling checkbox meegeeft weet je ook of je moet checken of unchecken.

de .checked state geeft een true of false terug. Zo weet je dus per afdelingscheckbox welke actie je moet uitvoeren

Dat is exact wat ik heb/bedoel!
Hier kan ik wat mee, thx! ik ga weer even verder zoeken

[digital-IMEI]

Jochemmol schreef op vrijdag 08 augustus 2008 @ 10:54:
Als je in de onclick de checked status van de afdeling checkbox meegeeft weet je ook of je moet checken of unchecken.

de .checked state geeft een true of false terug. Zo weet je dus per afdelingscheckbox welke actie je moet uitvoeren

Zou iemand mij hier nog een klein beetje mee verder kunnen helpen?

[Jochemmol]

Jij roept bij de onclick een functie aan.
Je zou daar een extra parameter kunnen toevoegen. checkflag.
Als je die vult met de checked value van de checkbox heb je daar een boolean (true/false) instaan.

bv

code:

<script type="text/javascript" language="javascript"> 

function check(field,checkflag ) {
if (checkflag == false) {
for (i = 0; i < field.length; i++) {
field[i].disabled = true;
field[i].checked = true;}

return "Uncheck All"; }
else {
for (i = 0; i < field.length; i++) {
field[i].disabled = false;
field[i].checked = false; }


return "Check All"; }
}
</script>

<input type='checkbox' name='1' onClick='this.value=check(this.form.".$var.",this.checked)'>

Je moet even kijken of dit zo werkt maar ongeveer dit principe

[r0bert]

http://www.google.nl/sear...l=nl&q=this.checked&meta=

Ik geloof niet dat this altijd verwijst naar het element, maar soms ook naar het gefirede event. Daar zou je dus een crossbrowser oplossing voor moeten gebruiken, maar die zijn meer dan voldoende beschikbaar (kant en klaar)

[ Voor 3% gewijzigd door r0bert op 08-08-2008 11:54 ]

[Jochemmol]

r0bert schreef op vrijdag 08 augustus 2008 @ 11:37:
http://www.google.nl/sear...l=nl&q=this.checked&meta=

Ik geloof niet dat this altijd verwijst naar het element, maar soms ook naar het gefirede event. Daar zou je dus een crossbrowser oplossing voor moeten gebruiken, maar die zijn meer dan voldoende beschikbaar (kant en klaar)

hmm. Ik zelf gebruik altijd document.getElementById("...").checked. Dat leverd nooit problemen op (athans nooit last van gehad )

[digital-IMEI]

Jochemmol schreef op vrijdag 08 augustus 2008 @ 11:44:
[...]

hmm. Ik zelf gebruik altijd document.getElementById("...").checked. Dat leverd nooit problemen op (athans nooit last van gehad )

Ik ben dat nu ook aan het gebruiken, zover ben ik:

code:

echo "<input type='checkbox' name='blaat' onClick='if(document.getElementById('blaat').checked)this.value=check(this.form.elements.".$var.")'>";

moet nu alleen nog een oplossing vinden dat hij op het moment dat de checkbox "geunchecked" wordt ook nog wat doet... Maar ik kom steeds verder

[r0bert]

JavaScript:

doCheckAll = function(bState)
{
   alert('State: ' + bState);
   //... je code
}

HTML:

<input type="checkbox" onclick="doCheckAll(this.checked);" />

//@Crisp; Ok, des te mooier Verwar ik het ergens mee.

[ Voor 17% gewijzigd door r0bert op 08-08-2008 12:05 ]

[crisp]

r0bert schreef op vrijdag 08 augustus 2008 @ 11:37:
http://www.google.nl/sear...l=nl&q=this.checked&meta=

Ik geloof niet dat this altijd verwijst naar het element, maar soms ook naar het gefirede event. Daar zou je dus een crossbrowser oplossing voor moeten gebruiken, maar die zijn meer dan voldoende beschikbaar (kant en klaar)

In deze context (binnen het onclick attribuut) verwijst this toch wel degelijk naar het input element, in elke browser

[digital-IMEI]

r0bert schreef op vrijdag 08 augustus 2008 @ 12:01:

JavaScript:

doCheckAll = function(bState)
{
   alert('State: ' + bState);
   //... je code
}

HTML:

<input type="checkbox" onclick="doCheckAll(this.checked);" />

//@Crisp; Ok, des te mooier Verwar ik het ergens mee.

Thx Robert!

zou je me misschien alleen kunnen uitleggen wat die bState exact is, ik zie wel dat dat de waarde van de checkbox is maar ik begrijp niet helemaal hoe ik die moet gebruiken....

JavaScript:

<script type="text/javascript" language="javascript"> 
doCheckAll = function(bState) 
{ 
   alert('State: ' + bState); 

var checkflag = "false";
function check(field) {
if (checkflag == "false") {
for (i = 0; i < field.length; i++) {
field[i].disabled = true;
field[i].checked = true;}
checkflag = "true";
return "Uncheck All"; }
else {
for (i = 0; i < field.length; i++) {
field[i].disabled = false;
field[i].checked = false; }
checkflag = "false";

return "Check All"; }
}
}
</script>

[Jochemmol]

bstatus is de value die this.checked opleverd (een true of false).

jou functie is heel simpel.

onclick event -> meegeven de checked state van de checkbox. Deze heb je nodig om te weten of je de personeel checkboxes moet checken of unchecken.

Op het moment dat je de checkbox (afdeling) uitvinkt is de chacket state false. In jou check functie moet je dan alle checkboxen van het personeel uitvinken.

Als het true is moet je de personeels checkboxen aanvinken.

Jou basis was op zich oke. alleen die variabele checkflag moet je vervangen met de actuele checked state van jou afdeling check box want wat er gebeurt is heel logisch.

De 1e keer is checkflag false. Die zet je bij de eerste keer vinken op true. Als jij dan de 2e afdeling aanvinkt voert hij de else (uit jou if statement) uit omdat checkflag true is omdat je dat zelf heb gezet. in die else zet jij checkflag weer false dus bij het uitvinken van de afdeling roep je weer die functie aan en dan is checkflag wel false dus ga je alles aanvinken.

snap je wat ik bedoel?
misschien heb je hier iets aan?
http://w3schools.com/htmldom/dom_obj_checkbox.asp
Hier staat checked ook tussen

[ Voor 91% gewijzigd door Jochemmol op 08-08-2008 12:24 ]

[digital-IMEI]

Dat is volgens mij wel een beetje mijn probleem

Ik snap wel waar het mis gaat maar ik zie nog niet alle verbanden zeg maar. Ik snap jou code ook wel en zie ook dat hij een beter resultaat geeft maar nu zie ik weer niet hoe ik de rest van de checkboxen (personeel) ook kan laten aanvinken....

ik heb nu als afdelingscheckbox het volgende:

HTML:

echo "<input type='checkbox' name=".$i." onclick='doCheckAll(this.checked).check(this.form.".$var.");' />";

ik weet wel dat het bij de .check(this.form.".$var.") mis gaat maar weet dus nog niet genoeg van JS af om dat in een goede context te zetten....

[ Voor 16% gewijzigd door digital-IMEI op 08-08-2008 12:44 ]

[djluc]

Je maakt het jezelf niet echt gemakkelijk door niet echt overzichtelijke code te hebben zonder indenting, wat commentaar etc. Het lijkt me handig als je begint met je code enigzins overzichtelijk op te zetten zodat je wat meer inzicht krijgt.

Ook het gebruik van een globale variable maakt het er niet eenvoudiger en overzichtelijker op zoals je merkt.

Ik heb een voorbeeldje voor je gemaakt, de JS code zal ik er nog even niet bij doen zodat je eerst zelf aan de slag kan:
http://djluc.nl/fileadmin/fora/checkboxtest.html
http://djluc.nl/fileadmin/fora/checkbox.js

In het JS bestand heb ik wel de opzet + commentaar van de code laten staan zodat je een idee hebt hoe je zoiets een beetje overzichtelijk opzet.

De functies:

• addEventHandlerDepartments: Zoekt alle inputs die in de classname department hebben staan. Deze krijgen bij onclick de eventhandler (functieaanroep) handlerDepartmentCheck mee. Als er dus op geklikt wordt zal die handler aangeroepen worden.
• handlerDepartmentCheck: Zodra een afdelingscheckbox aangeklikt wordt zal deze functie starten. Deze zoekt alle checkboxes waar het attribuut department gelijk is aan het id van de checkbox waar op geklikt is.

Ik zou de code nog wat meer checks geven maar in dit geval voldoen deze om de code zo overzichtelijk mogelijk te houden. Daarnaast vind ik een apart attribuut department wel duidelijk maar of dat ideaal is crossbrowser om te valideren ben ik niet helemaal van overtuigd.

[Jochemmol]

Sjengcity schreef op vrijdag 08 augustus 2008 @ 12:42:
Dat is volgens mij wel een beetje mijn probleem

Ik snap wel waar het mis gaat maar ik zie nog niet alle verbanden zeg maar. Ik snap jou code ook wel en zie ook dat hij een beter resultaat geeft maar nu zie ik weer niet hoe ik de rest van de checkboxen (personeel) ook kan laten aanvinken....

ik heb nu als afdelingscheckbox het volgende:

HTML:

echo "<input type='checkbox' name=".$i." onclick='doCheckAll(this.checked).check(this.form.".$var.");' />";

ik weet wel dat het bij de .check(this.form.".$var.") mis gaat maar weet dus nog niet genoeg van JS af om dat in een goede context te zetten....

Ik begrijp het.
Wat jij nu niet begrijpt aan r0bert is dat die docheck is de functie. ipv check

code:

'doCheckAll(this.checked).check(this.form.".$var.");' />";

is niet juist. Je moet die docheck functie uitbereiden met een extra parameter. namelijke this.form.".$var.");

code:

doCheckAll = function(bState, fields) 

onclick = doCheckAll(this.checked,this.form.".$var.");

[digital-IMEI]

Ik heb nog even de nodige aanpassingen moeten maken maar het is me gelukt!!!
.

JavaScript:

<script type="text/javascript" language="javascript"> 
doCheckAll = function(status, field) {  
var checkflag = status;  
if (checkflag == false) { 
for (i = 0; i < field.length; i++) { 
field[i].disabled = false; 
field[i].checked = false;} 
checkflag = "true"; 
return "Uncheck All"; } 
else { 
for (i = 0; i < field.length; i++) { 
field[i].disabled = true; 
field[i].checked = true; } 
checkflag = "false"; 

return "Check All"; } 
} 
</script>

Afdeling checkbox:

HTML:

<input type='checkbox' name=".$i." onclick = doCheckAll(this.checked,this.form.".$var.");>

Personeel checkbox:

HTML:

<input type='checkbox' name=". $var." value='1'>

Iedereen heel erg bedankt voor de hulp!

[Jochemmol]

Sjengcity schreef op vrijdag 08 augustus 2008 @ 13:40:
Ik heb nog even de nodige aanpassingen moeten maken maar het is me gelukt!!!
.

JavaScript:

<script type="text/javascript" language="javascript"> 
doCheckAll = function(status, field) {  
var checkflag = status;  
if (checkflag == false) { 
for (i = 0; i < field.length; i++) { 
field[i].disabled = false; 
field[i].checked = false;} 
checkflag = "true"; 
return "Uncheck All"; } 
else { 
for (i = 0; i < field.length; i++) { 
field[i].disabled = true; 
field[i].checked = true; } 
checkflag = "false"; 

return "Check All"; } 
} 
</script>

Afdeling checkbox:

HTML:

<input type='checkbox' name=".$i." onclick = doCheckAll(this.checked,this.form.".$var.");>

Personeel checkbox:

HTML:

<input type='checkbox' name=". $var." value='1'>

Iedereen heel erg bedankt voor de hulp!

Mooi ziet dat het werkt.
dit heb je niet meer nodig

code:

checkflag = "false"; 
en 
checkflag = "true";

[djluc]

Heb mijn voorbeeldje ook maar even compleet gemaakt dan zodat je in elk geval kan zien hoe je het ook aan kan passen zonder inline javascript aanroepjes enzovoorts. http://djluc.nl/fileadmin/fora/checkboxtest.html

[r0bert]

Misschien heb je hier nog wat aan. Ik heb 'm niet getest, dus moet je 'm nog wel even controleren. Hoop dat de comments duidelijkers zijn?

JavaScript:

doCheckAll = function(bStatus, aFields)
{       /*  bStatus = true || false (boolean); afhankelijk van de state van 
                de algemene checkbox
                aFields = Array; verzameling van de checkboxen                          */

        // Alle velden doorlopen, iField is de index van het huidige veld
    for (iField = 0; iField < aFields.length; iField++) 
    {   // Het te veranderen veld
        oField = aFields[iField];
        
            // Verander state en disabled naar hetzelfde als de algemene 
            // checkbox (het is "correcter" om 'checked' en 'null' te gebruiken geloof ik
            // Dat zou eruit zien als
            // oField.checked = (bStatus) ? 'checked' : null;
            // bStatus geeft true of false. Bij true wordt het eerst argument 
            // genomen (voor de :), anders de tweede
            
        oField.disabled = oField.checked = bStatus; 
    }
        
        // Laat de aanroep weten of we alle checkboxen gechecked hebben (true) 
        // of niet (false), overeenkomstig met de state van de algemene checkbox
    return bStatus;
     
} 

Ik moet zeggen dat je aanroep en benaming van de velden nog ietswat vreemd overkomt, maar het werkt. En da's ook belangrijk

[Verwijderd]

Misschien niet onbelangrijk om te melden aan iedere (beginnende) gebruiker: Firefox heeft een debug-mode / foutconsole. Dit gebruik ik tijdens de creatie. Maar misschien hebben andere betere tips om als testomgeving te gebruiken.