Søg
Avatar billede Christian_Bundgaard Nybegynder
31. oktober 2011 - 22:41 Der er 34 kommentarer og
1 løsning

Hjælp til en simpel JS funktion

Hejsa

Som nogle af jer måske har erfaret er jeg mildt sagt ikke den skarpeste til Javascript. Jeg har prøvet med flere forskellige scripts på nettet, men jeg kan simpelthen ikke få det til at virke.

Sagen er den, at jeg skal have lavet en funktion, som kan vælge alle checkboxes og en funktion, som kan fravælge alle checkboxes. Da jeg har prøvet forskellige ting, så har jeg allerede ændret koden, så det burde være simpelt at gå til.

<div class="sortering_cats"> <input class="styled" type="checkbox" <?php if(isset($_POST["list1"]) || $firstview == "yes") echo "checked=\"true\""; ?> name="list1">Apple </div>
        <div class="sortering_cats"> <input class="styled" type="checkbox" <?php if(isset($_POST["list2"]) || $firstview == "yes") echo "checked=\"true\""; ?> name="list2">Apps </div>
        <div class="sortering_cats"> <input class="styled" type="checkbox" <?php if(isset($_POST["list3"]) || $firstview == "yes") echo "checked=\"true\""; ?> name="list3">Computer </div>
        <div class="sortering_cats"> <input class="styled" type="checkbox" <?php if(isset($_POST["list4"]) || $firstview == "yes") echo "checked=\"true\""; ?> name="list4">Diverse </div>
        <div class="sortering_cats"> <input class="styled" type="checkbox" <?php if(isset($_POST["list5"]) || $firstview == "yes") echo "checked=\"true\""; ?> name="list5">Debat </div>
        <div class="sortering_cats"> <input class="styled" type="checkbox" <?php if(isset($_POST["list6"]) || $firstview == "yes") echo "checked=\"true\""; ?> name="list6">Film </div>
        <div class="sortering_cats"> <input class="styled" type="checkbox" <?php if(isset($_POST["list7"]) || $firstview == "yes") echo "checked=\"true\""; ?> name="list7">Fremtidsteknologi </div>
        <div class="sortering_cats"> <input class="styled" type="checkbox" <?php if(isset($_POST["list8"]) || $firstview == "yes") echo "checked=\"true\""; ?> name="list8">Gaming </div>
        <div class="sortering_cats"> <input class="styled" type="checkbox" <?php if(isset($_POST["list9"]) || $firstview == "yes") echo "checked=\"true\""; ?> name="list9">Guides </div>
        <div class="sortering_cats"> <input class="styled" type="checkbox" <?php if(isset($_POST["list10"]) || $firstview == "yes") echo "checked=\"true\""; ?> name="list10">Hjemmesider </div>
        <div class="sortering_cats"> <input class="styled" type="checkbox" <?php if(isset($_POST["list11"]) || $firstview == "yes") echo "checked=\"true\""; ?> name="list11">Mobil </div> <br>

<a href="java script:void(0)" onclick="checkAll();">Vælg alle</a> | <a href="java script:void(0)" onclick="uncheckAll();">Fravælg alle</a>

(Der kan selvfølgelig sættes variabler ind, når JS funktioner kaldes)

Det jeg skal have lavet, er altså et loop, der checker/unchecker alle checkboxe med et navn som starter med "list". Det burde være simpelt.

I skal dog være opmærksomme på, at der er sat en JS styling på checkboxene. I kan se det i aktion her:

http://www.focusonit.dk/artikler.php

Jeg ved ikke, om det har en betydning for scriptet.

På forhånd tak!

Vh
Christian

PS: Koden er super svær at overskue her (for der er vel ikke et tag, man kan sætte koden ind i), men jeg håber I kan tyde det. Det vigtige er vel bare, at checkboxene har navnet "list" + et-nummer.
Avatar billede danco Nybegynder
01. november 2011 - 00:00 #1
function checkAll(formname){
            elementList = document.getElementById(formname).elements;
            for(i = 0; i<elementList.length; i++){
                el = elementList;
                if(el.type == "checkbox"){
                    el.checked = true;
                }
            }
        }

Denne funktion løber et element igennem med et givent ID og finder alle checkboxe og krydser dem af. Min tanke er så at du giver din form et ID
[i]<form action="" id="formular1" method="POST">
Avatar billede Christian_Bundgaard Nybegynder
01. november 2011 - 13:34 #2
Mange tak for svaret, men det virker desværre ikke. I kan se det på dette link:

http://www.focusonit.dk/artikler.php

Her er koden, som den er nu:

HTML

<form method="post" action="<?php $PHP_SELF; ?>" onclick="event.cancelBubble=true;if(event.stopPropagation)event.stopPropagation()" id="sort_form">
        <input type="hidden" name="sortby" value="<?php echo $sortby; ?>">
        <div class="sortering_cats"> <input class="styled" type="checkbox" <?php if(isset($_POST["list1"]) || $firstview == "yes") echo "checked=\"true\""; ?> name="list1">Apple </div>
        <div class="sortering_cats"> <input class="styled" type="checkbox" <?php if(isset($_POST["list2"]) || $firstview == "yes") echo "checked=\"true\""; ?> name="list2">Apps </div>
        <div class="sortering_cats"> <input class="styled" type="checkbox" <?php if(isset($_POST["list3"]) || $firstview == "yes") echo "checked=\"true\""; ?> name="list3">Computer </div>
        <div class="sortering_cats"> <input class="styled" type="checkbox" <?php if(isset($_POST["list4"]) || $firstview == "yes") echo "checked=\"true\""; ?> name="list4">Diverse </div>
        <div class="sortering_cats"> <input class="styled" type="checkbox" <?php if(isset($_POST["list5"]) || $firstview == "yes") echo "checked=\"true\""; ?> name="list5">Debat </div>
        <div class="sortering_cats"> <input class="styled" type="checkbox" <?php if(isset($_POST["list6"]) || $firstview == "yes") echo "checked=\"true\""; ?> name="list6">Film </div>
        <div class="sortering_cats"> <input class="styled" type="checkbox" <?php if(isset($_POST["list7"]) || $firstview == "yes") echo "checked=\"true\""; ?> name="list7">Fremtidsteknologi </div>
        <div class="sortering_cats"> <input class="styled" type="checkbox" <?php if(isset($_POST["list8"]) || $firstview == "yes") echo "checked=\"true\""; ?> name="list8">Gaming </div>
        <div class="sortering_cats"> <input class="styled" type="checkbox" <?php if(isset($_POST["list9"]) || $firstview == "yes") echo "checked=\"true\""; ?> name="list9">Guides </div>
        <div class="sortering_cats"> <input class="styled" type="checkbox" <?php if(isset($_POST["list10"]) || $firstview == "yes") echo "checked=\"true\""; ?> name="list10">Hjemmesider </div>
        <div class="sortering_cats"> <input class="styled" type="checkbox" <?php if(isset($_POST["list11"]) || $firstview == "yes") echo "checked=\"true\""; ?> name="list11">Mobil </div> <br>
        <a href="java script:void(0)" onclick="checkAll('sort_form');">Vælg alle</a> | <a href="java script:void(0)" onclick="uncheckAll('sort_form');">Fravælg alle</a>

JS

<script type="text/javascript">
function checkAll(formname){
    elementList = document.getElementById(formname).elements;
    for(i = 0; i<elementList.length; i++){
        el = elementList;
        if(el.type == "checkbox"){
            el.checked = true;
        }
    }
}

function uncheckAll(formname) {
    elementList = document.getElementById(formname).elements;
    for(i = 0; i<elementList.length; i++){
        el = elementList;
        if(el.type == "checkbox"){
            el.checked = false;
        }
    }
}
</script>
Avatar billede olebole Juniormester
01. november 2011 - 14:38 #3
<ole>


    for(i = 0; i<elementList.length; i++){
        el = elementList[ i];



/mvh
</bole>
Avatar billede olebole Juniormester
01. november 2011 - 14:40 #4
- og generelt er det nok at slå length op én gang:


    for(i=0,j=<elementList.length; i<j; i++){        el = elementList[ i];

Avatar billede olebole Juniormester
01. november 2011 - 14:42 #5
Jeg får spat af E's interface!


    for(i=0,j=elementList.length; i<j; i++){
        el = elementList[ i];

Avatar billede Christian_Bundgaard Nybegynder
01. november 2011 - 16:13 #6
Mange tak! Endelig virker det :)

Der er dog et lille problem. Man skal trykke to gange, før funktionen aktiveres? :S

PS: Hvordan laver du de kode bokse?
Avatar billede olebole Juniormester
01. november 2011 - 18:22 #7
Jeg har testet koden, og den virker fint hos mig:


<script type="text/javascript">   
function checkAll(elmForm){
    elementList = elmForm.elements;
    for(i = 0; i<elementList.length; i++){
        el = elementList[ i];
        if(el.type == "checkbox"){
            el.checked = true;
        }
    }
}

function uncheckAll(elmForm) {
    elementList = elmForm.elements;
    for(i = 0; i<elementList.length; i++){
        el = elementList[ i];
        if(el.type == "checkbox"){
            el.checked = false;
        }
    }
}
</script>

<form action="">
    <input type="checkbox" name="">
    <input type="checkbox" name="">
    <input type="checkbox" name="">
    <input type="checkbox" name="">
    <p><label>Check alle <input onclick="checkAll(this.form)" type="checkbox" name=""></label>
    ||
    <label><input onclick="uncheckAll(this.form)" type="checkbox" name=""> Uncheck alle</label></p>
</form>


Jeg har rettet en lille dertalje, som ikke ændrer i funktionaliteten - nemlig at sende en reference med til formen, i stedet for at bruge id'et på formen.

Læg i øvrigt mærke til brugen af label, som gør teksten klikbar.

Ekspertens mere eller mindre udokumenterede BB-koder kan du læse om i denne guide: http://www.eksperten.dk/guide/1325

Derudover har jeg skrevet en lille 'editor' bjælke, der 'automatisk' indskrives i Ekspertens sider med et klik på en favorit i browseren: http://www.eksperten.dk/guide/1450

Pas dog lige på et par detaljer: Når man skriver en for løkke, bruger man ofte bogstavet i som iterator i square brackets - men det er også begyndelses tag for italic. Derfor bliver resten af tråden derfor formateret som italic - og det kan ikke ophæves i et efterfølgende indlæg :o|

Løsningen er at skrive f.eks:


el = elementList[ i];


- bemærk mellemrummet før i'et!

En anden ting er brugen af preformateret tekst - i HTML, implementeret med <pre></pre>. Det ændrer linjeskiftene, så man ikke umiddelbart kan bruge tekst fra et sådan felt - kopieret fra Explorer og derefter anvendt i DreamWeaver. Linjeskiftene 'forsvinder'.

Det var det, der skete, da jeg kopierede min egen kode fra #3 og pastede den ind i #4  *o)
Avatar billede Christian_Bundgaard Nybegynder
01. november 2011 - 18:39 #8
Mange tak. Jeg tænkte på, om dette kan have en indflydelse?

(div)
<form method="post" action="<?php $PHP_SELF; ?>" onclick="event.cancelBubble=true;if(event.stopPropagation)event.stopPropagation()" id="sort_form">(/div)

Det burde det jo ikke,men jeg forstår bare ikke, hvorfor i al verden man skal trykke to gange.
Avatar billede olebole Juniormester
01. november 2011 - 19:15 #9
Nej, det bør ikke have nogen indflydelse. Til gengæld op dagede jeg bl.a., at du har nogle DIV elementer inde i nogle A elementer. Det er ikke tilladt, og følgerne kan være mange og uforudsigelige.

Jeg lavede derfor lige en validering, og der er faktisk 60 fejl, som du nok bør kikke på først  *o)
Avatar billede Christian_Bundgaard Nybegynder
01. november 2011 - 19:25 #10
Hmm... ja det ville nok være en god idé :)

Jeg har fundet problemet. Uden JS styling af checkboxe virker det - med gør det ikke. Og hvorfor i alverden det så er et problem er da et godt spørgsmål ^^
Avatar billede olebole Juniormester
01. november 2011 - 19:34 #11
Sikkert fordi, det er et skidt script  =)
Avatar billede olebole Juniormester
01. november 2011 - 19:36 #12
- men prøv at få styr på HTML'en først, så du ikke skal lave noget om igen  *o)
Avatar billede Christian_Bundgaard Nybegynder
01. november 2011 - 19:43 #13
Problemet er bare, at jeg ikke fatter halvdelen af de fejl, den kommer frem med, og jeg fatter endnu mindre, hvorfor det er så vigtigt. Jeg har endnu ikke fået fejl, der har været på grund af det.

PS: Det er dette script. http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
Avatar billede olebole Juniormester
01. november 2011 - 19:49 #14
Det er overordentlig vigtigt! Uden valid kode, er det helt op til tilfældigheder, hvad der sker i browseren. Det nytter heller ikke at tune bilen, hvis der er ottekantede hjul på den.

I virkeligheden burde siden slet ikke vises, men blot udløse fejl i en hvid browser. Af mange grunde er vore browsere dog ganske tilgivende og forsøger at gætte sig frem til, hvad meningen med koden er. Den slags går ofte galt, hvorfor der ikke er nogen erstatning for valid kode  =)
Avatar billede Christian_Bundgaard Nybegynder
01. november 2011 - 19:58 #15
Okay... men hvis alle browsere altid gætter rigtigt, kan jeg personligt bare ikke se problemet. Men jeg skal nok kigge på det, synes dog bare stadig at mange af fejlene er svære at forstå.

Men ikke desto mindre så løser det ikke problemet med dobbeltklik på checkboxene. Og desuden opstår der også en fejl, der siger, at man ikke må bruge "checked=true".
Avatar billede olebole Juniormester
01. november 2011 - 20:04 #16
Det er fuldstændig korrekt. Det er ikke en lovlig attribut
Avatar billede Christian_Bundgaard Nybegynder
01. november 2011 - 20:05 #17
Hvorfor bruges den så i det JS script? Hvad skal man bruge i stedet? checked=checked?
Avatar billede olebole Juniormester
01. november 2011 - 20:08 #18
Jeg kan love dig for, at hvis du kører 180 km/t i den forkerte side af motorvejen, vil langt de fleste også flytte sig for dig. Men det kan jo aldrig blive en god grund til at køre 180 mod kørselsretningen.

Havde du kodet websider for 10 år siden, ville du elske stramme standarder! Heldigvis bliver standarderne mere stringente med tiden - og browserne er blevet langt bedre til at overholde dem. Det gør det også lettere og lettere at kode korrekt og få det ventede resultat. Det er bare at sætte sig ind i reglerne - og følge dem  *o)
Avatar billede Christian_Bundgaard Nybegynder
01. november 2011 - 20:13 #19
Okay, tak for hjælpen. Jeg kigger på det, har da allerede fået fjernet omkring 20 fejl.

Men mht. shorttag:

"The sequence <FOO /> can be interpreted in at least two different ways, depending on the DOCTYPE of the document. For HTML 4.01 Strict, the '/' terminates the tag <FOO (with an implied '>'). However, since many browsers don't interpret it this way, even in the presence of an HTML 4.01 Strict DOCTYPE, it is best to avoid it completely in pure HTML documents and reserve its use solely for those written in XHTML. "

Betyder det, jeg skal ignorere det, da jeg ikke bruger XHTML?

Og som et sidste spørgsmål til dig eller andre for at få trådens tema afsluttet: er der én, der kan se, hvorfor man med det her JS styling script skal trykke to gange / fortælle ændringer, så det virker korrekt? http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/custom-form-elements.js
Avatar billede olebole Juniormester
01. november 2011 - 20:14 #20
Den bruges ikke i JavaScript. Den bruges kun af koderen, der har skrevet det pågældende script.

Man kan ikke umiddelbart bruge noget i stedet. Jeg vil anbefale at finde et bedre script af en, der kan kode ... i modsætning til ham/hende, der har kodet det, du bruger ligenu
Avatar billede olebole Juniormester
01. november 2011 - 20:16 #21
Ja, du bruger ikke XHTML (og har øjensynilgt heller ikke grund til det), så derfor må du ikke bruge XHTML-lukninger af dine tags
Avatar billede olebole Juniormester
01. november 2011 - 20:31 #22
Til dit spørgsmål om, hvorfor det ikke virker, når du styler' dine elementer, så skyldes det, at du ikke styler dine elementer - men udskifter dem med nogle helt andre. Derfor nytter det ikke noget at gøre noget ved de skjulte elementer. I stedet skal check-alle funktionerne tale med scriptet ... ikke med de rigtige checkbox'e.

Det ændrer dog ikke ved, at du bør skrive valid HTML og vælge et script, der overholder gældende standarder
Avatar billede Christian_Bundgaard Nybegynder
01. november 2011 - 20:54 #23
Okay, så konklusionen er, at jeg skal få lavet et check-all script, der gør det samme som JS styling funktionen? Jeg forstår bare ikke, hvorfor det så reagerer ved dobbeltklik. :S
Avatar billede olebole Juniormester
01. november 2011 - 21:03 #24
Nej, jeg ville anbefale at finde et validt styling script.

Det virker ved dobbeltklik, fordi scriptet arbejder sammen med de oprindelige checkbox'e, som er dem, dancos script tager fat i
Avatar billede olebole Juniormester
01. november 2011 - 21:08 #25
Jeg tror i øvrigt, vi er på et vildspor omkring "checked". Jeg så forkert i din kode - det er en helt valid attribut på et input element. Hvor er det, du siger, du får fejl omkring det?
Avatar billede Christian_Bundgaard Nybegynder
01. november 2011 - 21:21 #26
Error Line 211, Column 97: value of attribute "CHECKED" cannot be "TRUE"; must be one of "CHECKED"

...s="styled" type="checkbox" checked="true" name="list4">Diverse </label> </div>

The value of the attribute is defined to be one of a list of possible values but in the document it contained something that is not allowed for that type of attribute. For instance, the "selected" attribute must be either minimized as "selected" or spelled out in full as "selected="selected""; a value like "selected="true"" is not allowed.

--- kopierede lige en ud.
Avatar billede Christian_Bundgaard Nybegynder
01. november 2011 - 21:24 #27
Jeg skal lige været helt sikker: det, du anbefaler, er, at jeg finder et andet script til at style checkboxene? Jeg skal bare være 100 % sikker, er ved at være godt forvirret af alle de beskeder, når man ikke kan redigere i dem... ;)
Avatar billede olebole Juniormester
01. november 2011 - 21:33 #28
Nå, så forstår jeg bedre. Så er den korrekte syntaks checked="cheked"  =)

Nej, jeg skal lige være færdig med noget andet, så skriver jeg et andet check-all script, der arbejder op mod styling scriptet
Avatar billede Christian_Bundgaard Nybegynder
01. november 2011 - 21:38 #29
Wow, mange, mange, MANGE tak! :) Det er da utroligt så meget tid, du gider bruge på at hjælpe mig ;)

Men jeg har forstået det med valid HTML nu - og når jeg er færdig med det her, vil jeg få hele siden valideret. Godt nok tager det tid, men jeg har vist fattet, at det er nødvendigt ;)
Avatar billede olebole Juniormester
01. november 2011 - 22:32 #30
Selvtak, din sidste kommentar i #29 er det hele værd  *o)

Prøv denne kode (ganske utestet):


function toggelCheck(sForm, bCheckAll) {
    var elmForm = document.getElementById(sForm),
    aSpan = elmForm.getElementsByTagName("span");
    bCheckAll = bCheckAll===true;
    for (var i=0,j=aSpan.length; i<j; i++) {
        elm = aSpan[i];
        if (elm.className!="checkbox") continue;
        if (elm.nextSibling.checked!=bCheckAll) {
            elm.check();
        }
    }
}

/* og dine links skal så se sådan ud */

<a href="java script:void(0)" onclick="toggelCheck('sort_form', true);">Vælg alle</a> | <a href="java script:void(0)" onclick="toggelCheck('sort_form');">Fravælg alle</a>

Avatar billede olebole Juniormester
01. november 2011 - 22:34 #31
Ups, jeg glemte at erklære en variabel. Ret lige til dette:

aSpan = elmForm.getElementsByTagName("span"), elm;
Avatar billede olebole Juniormester
01. november 2011 - 22:40 #32
- og ved nærmere eftersyn kan du ikke bruge labels til dine checkbox'e sammen med styling scriptet. Undskyld, jeg også der ledte dig på vildspor  :D
Avatar billede Christian_Bundgaard Nybegynder
02. november 2011 - 09:49 #33
Mange tak. Jeg så godt det med labels, men ville lige spørge dig om det i dag - men nu er det jo lige meget :)

Jeg har prøvet scriptet, men det virker desværre ikke. Jeg gik ud fra, det var sådan her, det skulle være:

function toggelCheck(sForm, bCheckAll) {
    var elmForm = document.getElementById(sForm),
    aSpan = elmForm.getElementsByTagName("span"), elm;
    bCheckAll = bCheckAll===true;
    for (var i=0,j=aSpan.length; i<j; i++) {
        elm = aSpan[i];
        if (elm.className!="checkbox") continue;
        if (elm.nextSibling.checked!=bCheckAll) {
            elm.check();
        }
    }
}
Avatar billede olebole Juniormester
02. november 2011 - 17:34 #34
Doohhh ... my bad! Prøv at rette den udkommeterede linje til den nedenunder:


//elm.check();
Custom.check.call(elm);

Avatar billede Christian_Bundgaard Nybegynder
02. november 2011 - 20:31 #35
Mange tak! Nu virker det perfekt! :)

(og jeg formoder du ikke vil have point som sædvanlig... så også tak der :) )
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 1 03/02/202614:19 03/02/202618:42
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Sæt vindue størrelse Af poulmadsen i JavaScript 1 08/10/202417:18 13/10/202412:33
Opgavestyring Af ingeman i JavaScript 1 15/09/202416:06 15/09/202420:40
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 04:46 Kho Sim Số Đẹp Giá Rẻ, Uy Tín Lớn Nhất Việt Nam! Af khosimcom i Excel
31/0310:22 Makro der gemmer vedhæftet fil fra Msg og omdøber filen Af lokesa i Excel
30/0313:45 Kablet forbindelse mellem android telefon og windows 11 pc Af 1Dorte i Android
30/0312:04 Elementtype vises - og ikke billedet? Af hkprofil i Billedbehandling
29/0312:08 Problemer med replay af købte kursusvideoer Af annam i Browsere
White papers
Flere white papers »