Søg
Avatar billede expnet Seniormester
09. april 2011 - 09:32 Der er 16 kommentarer og
1 løsning

checkbox og array function + select all checkbox

Hej

Jeg sidder her og prøver at forstå javascript og prøve at finde ud af om jeg kan vælge alle mine checkboxe men de ser sådan her ud

Den loop op til 100 af den men hvor value ikke er det samme

<input type="checkbox" name="add_number[]" value="'.$arr['Number'].'">


<a href="#" onclick="CheckAll(document.FormDebitor.add_number)">Check all</a>

-----[ Javascript ]-----

function CheckAll(chk){
    for (i = 0; i < chk.length; i++)
    chk[i].checked = true ;
}

function UnCheckAll(chk){
    for (i = 0; i < chk.length; i++)
    chk[i].checked = false ;
}

-----------------------------------

Men det jeg er ikke lige kan se er hvordan jeg kan fange [] på mit input name="add_number[]"
Avatar billede olsensweb.dk Ekspert
09. april 2011 - 09:51 #1
http://www.eksperten.dk/spm/915843#reply_7629790
http://forums.devarticles.com/javascript-development-22/checkbox-array-problem-2758.html
Avatar billede olsensweb.dk Ekspert
09. april 2011 - 10:58 #2 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
    // viser hvordan man kan gører det uden at tage form name / checkbox name med over
    function CheckAll(){    
        var lng = document.FormDebitor["add_number[]"].length; 
        for(i=0; i<lng; i++){
            document.FormDebitor["add_number[]"][i].checked=true;            
        }  
    }
    // viser hvordan man kan gører det når man tager form name / checkbox name med over
    function UnCheckAll(form, boxname){        
        var lng = document[form][boxname].length;        
        for(i=0; i<lng; i++){
            document[form][boxname][i].checked=false;            
        }  
    }
    </script>
</head>    
<body>
<form name ="FormDebitor" action ="#">
<input type="checkbox" name="add_number[]" value="1">
<input type="checkbox" name="add_number[]" value="2">
<input type="checkbox" name="add_number[]" value="4">
<input type="checkbox" name="add_number[]" value="8">
<input type="checkbox" name="add_number[]" value="16">
<input type="checkbox" name="add_number[]" value="32">
<a href="#" onclick="CheckAll()">Check all</a>
<a href="#" onclick="UnCheckAll('FormDebitor', 'add_number[]')">UnCheck all</a>
</form>
</body>
</html>

demo http://olsensweb.dk/test/experten/spm/936307
Avatar billede olebole Juniormester
09. april 2011 - 16:31 #3
<ole>

Du kan også bruge getElementsByName i CheckAll. Derudover bør man kun danne nodelist'en én gang i en funktion. I eksemplet ovenfor dannes en nodelist n + 1 gange, hvor n er antallet af checkbox'e i formen.

Mit forslag ville derfor være noget à la:


<script type="text/javascript">
// viser hvordan man kan gører det uden at tage form name / checkbox name med over
function CheckAll(){
    var aNodeList = document.getElementsByName("add_number[]"); 
    var lng = aNodeList.length;
    for(i=0; i<lng; i++){
        aNodeList[i].checked=true;           
    } 
}
// viser hvordan man kan gører det når man tager form name / checkbox name med over
function UnCheckAll(frm, boxname){
    var aNodeList = document[frm][boxname]
    var lng = aNodeList.length;       
    for(i=0; i<lng; i++){
        aNodeList[i].checked=false;           
    } 
}
</script>



/mvh
</bole>
Avatar billede olebole Juniormester
09. april 2011 - 16:33 #4
PS: ordet form er ikke reserveret, men da JavaScript/DOM kan misforstå ordet, er det en god idé at undgå det som variabelnavn.
Avatar billede expnet Seniormester
09. april 2011 - 19:22 #5
Jeg ved ikke lige hvem der skal have point for sin løsning.
Jeg fik til sidst strikket en løsning sammen med brug fra svar #2

Så vil i give et svar, dem som mener der skal have point

Med venlig hilsen
expnet
Avatar billede olebole Juniormester
09. april 2011 - 19:31 #6
Jeg er ikke interesseret i points, men overvej det, jeg skrev om optimering i begyndelsen af mit indlæg. Man kan ligeså godt forsøge at tillægge sig gode og effektive kodevaner  =)
Avatar billede olsensweb.dk Ekspert
09. april 2011 - 22:33 #7
>Jeg fik til sidst strikket en løsning sammen med brug fra svar #2
det var også meningen :)

oleboles 2 functioner kan umildbart erstatte mine 2, og jeg tror uden at have målt performence på dem at ole's vinder :(.
men du bør under alle omstændigheder rette i én af dem så kaldene ser ens ud, personlig ville jeg rette CheckAll() til CheckAll('FormDebitor', 'add_number[]'), og tilsvarende i functionen, da functinen kan bruges mere generalt, og evt smides over i et code lib.
men meningen med at skrive functionerne på 2 forskellige måder var at du skulle se hvordan man kunne tilgå variablen "add_number[]"

@olebole: #4 er tage af nota, retter det i mine egne js filer næste gang jeg skal rette dem
Avatar billede olebole Juniormester
09. april 2011 - 22:55 #8
ronols >> Don't get me wrong  *o)

Du gør det helt rigtige ved at definere variablen med listens length udenfor løkken - i stedet for at skrive noget à la (var i=0; i<arr.length; i++) - som ellers ofte ses. Derved speeder du løkkens afvikling voldsomt op. Jo længere array/list, jo større performanceforbedring.

Min egen vane ser sådan ud: (var i=0,j=arr.length; i<j; i++) - men det er hverken værre eller bedre end din version. Det er bare et spørgsmål om, hvordan man nu vænner sig til at udforme sin kode.

Jo mere man vænner sig til at simplificere sine løkker - og såvidt muligt lægge opslag udenfor - jo hurtigere bliver de. Specielt ved lange arrays og/eller nestede løkker bliver performanceforskellen tydelig for det blotte øje. Under alle omstændigheder kan det godt betale sig at tilrette sine vaner på dette område  =)
Avatar billede olebole Juniormester
09. april 2011 - 23:03 #9
PS: Jeg har ikke testet de sidste par år, men for et par år siden var baglæns løkker (var i=arr.length-1; i>=0; i--) markant hurtigere end tilsvarende forlæns. Endnu hurtigere var en nedtællende do/while.

Ligeledes performede ARRAY.push kamp-elendigt i forhold til (var i=0; i<someNumber; i++) arr[i] = "Something";.

Jeg har på fornemmelsen, at disse forhold - som så mange andre - er blevet forbedret over de seneste JS-/browser-versioner. Men det er som sagt ikke noget, jeg personligt har teste på de seneste 12-24 måneder. Måske, det er ved at være på tide, jeg gentager disse test  =)
Avatar billede expnet Seniormester
10. april 2011 - 09:16 #10
Nu hvor vi sidder og snakker om god kodning, og andre små ting. Så ville det da være dejligt at få jeres syn på dette script som virker fint, men om det også holder i længden kunne være rart.

-------------------------------------------------------------

function CheckAndUncheck(){
    if(document.FormDebitor.all_add_number.checked == true){

        var lng = document.FormDebitor["add_number[]"].length;
        for(i=0; i<lng; i++){
            document.FormDebitor["add_number[]"][i].checked=true;           
        } 

    }else{
// viser hvordan man kan gører det når man tager form name / checkbox name med over
        var lng = document.FormDebitor["add_number[]"].length;       
        for(i=0; i<lng; i++){
            document.FormDebitor["add_number[]"][i].checked=false;           
        } 
    }
}
Avatar billede olsensweb.dk Ekspert
10. april 2011 - 13:40 #11
#9 rimelig interessant

#10   

  • jeg vil vælge at lægge lng over if sætningen, da den skal udføres under alle omstændigheder, og der er en linje mindre at vedligeholde, (og lidt mindre data at downloade (insekt erotik) )
  • forkorte if sætningen "document.FormDebitor.all_add_number.checked==true" => "document.FormDebitor.all_add_number.checked"
  • fjerne kommentaren, misvisende i den sammenhæng
  • overveje det olebole skriver i #3 "Du kan også bruge getElementsByName i CheckAll. Derudover bør man kun danne nodelist'en én gang i en funktion. I eksemplet ovenfor dannes en nodelist n + 1 gange, hvor n er antallet af checkbox'e i formen.", i mit lille eks betyder det intet, men når du har opimod 100 checkboxe er det værd at overveje. (det er rent insekt erotik, og brugeren sparre vel et par nano Sek)
  • jeg ved ikke hvordan du kalder CheckAndUncheck(), om du bruger onchange eller onclick, men ved onchange udfører IE først eventen når checkboxen forlades :(

    function CheckAndUncheck(){
    var lng = document.FormDebitor["add_number[]"].length;
    if(document.FormDebitor.all_add_number.checked){        
        for(i=0; i<lng; i++){
            document.FormDebitor["add_number[]"][i].checked=true;           
        } 
    }else{
        for(i=0; i<lng; i++){
            document.FormDebitor["add_number[]"][i].checked=false;           
        } 
    }
}
Avatar billede olebole Juniormester
10. april 2011 - 15:00 #12
Det er fuldstændig korrekt, at det er rent flueknebberi i dette tilfælde. Jeg vil dog godt sætte 10 stegte rødspætter på, at når man koder ineffektivt i dette tilfælde, gør man det også, når der er tale om situationer, hvor det virkelig betyder noget.

Det handler om at tillægge sig gode og effektive kodevaner. Der er oceaner af ting at tage stilling til, når man koder, hvorfor det gælder om at få luget så meget ud i nødvendige overvejelser, som det overhovedet kan lade sig gøre. Opgaven er ikke at gøre livet som udvikler så kompliceret som muligt ... tvætimod.

Gør man god og effektiv kodning til en automatisk adfærd, man end ikke tænker over, er det ligemeget, om man i nogle situationer kun sparer brugeren for et par nanosekunder.

Skriver man altid god og effektiv kode, gør man det også, når det virkelig batter. Vælger man kun at ville gøre det, når det batter - og derfor hvergang skal gøre disse overvejelser - glemmer man det. Det er generelt hele idéen med begrebet "gode vaner" - uanset hvilke aspekster af livet, man taler om  *o)
Avatar billede olebole Juniormester
10. april 2011 - 15:35 #13
- og nu, vi har den gode kode fremme i lyset, skal det da også nævnes, at en switch konstruktion er dramatisk bedre performende end en if/else if/else konstruktion.

Her gælder naturligvis også, at lange konstruktioner (mange if/if else) giver mere mærkbare forbedringer. Skriver man f.eks. større libraries, er disse performance overvejelser et absolut must.

Desværre ser man dog ofte, at den slags ikke bliver prioriteret ... og måske så ikke mærkeligt. Det handler om generelt at have gode kodevaner. Så sker det meste automatisk - og resten kommer man i tanker om ved første itterering af refactoring processen
Avatar billede olsensweb.dk Ekspert
10. april 2011 - 23:37 #14
jeg har prøvet at omskrive scriptet efter nogle af de optimerings tips der er kommet i tråden, kan det optimeres mere ??, hvis det kan hører jeg det gerne, kunne være flere vaner der skal brydes
håber OP stadig kan forstår scriptet, det er tråds alt ham der skal vedligeholde det.  
 // optimeret med "nedtælling er hurtigerer end optælling" (ikke noget jeg havde tænk over før)
// og "while er hurtigerer end for løkke", (ikke noget jeg havde tænk over før)
// samt selvføgelig dannelsen af nodeLIst kun 1 gang 
// kan jeg virkelig "kill your darling" for loop ;(
// google "js loop forward vs backward"
// http://jsperf.com/forward-loop-vs-bakward-loop-javascript , han begår iøvrigt en fejl med beregning af længden af array hver gang i for løkken forward 
    
function CheckAndUncheck(){
    var aNodeList = document.getElementsByName("add_number[]"); 
    var lng = aNodeList.length;        
    if(document.FormDebitor.all_add_number.checked){
    // jeg ville sætte en id på checkboxen.
    // if(document.getElementById("all_add_number").checked){ 
        while(--lng >= 0){
            aNodeList[lng].checked=true; 
        }
    }
    else{
        while(--lng >= 0){
            aNodeList[lng].checked=false; 
        }
    }
}
   

vedr switch, bruger jeg det meget gerne, da switch er letterer at læse en if else if else

>> og resten kommer man i tanker om ved første itterering af refactoring processen
dertil er der mange der ikke kommer, det bliver lavet Quick And Dirty, og man går ikke tilbage i tidligere processer, og optimerer tidlige code og opdaterer dokumentationen :(
Avatar billede olebole Juniormester
11. april 2011 - 00:54 #15
Der er (næsten) altid mulighed for at optimere, men personligt ville jeg nok ikke kaste mig ud i Duff's Device i situationer som denne:
    http://en.wikipedia.org/wiki/Duff%27s_device

Faktisk tror jeg, din kode bliver endnu hurtigere ved at nøjes med (men det er utestet):

    while(--lng){

Når lng bliver -1 (= false), vil while-betingelsen ikke længere være opfyldt, og løkken stopper.

Jeg bruger sjældent selv baglæns for-/while-loops til småting, men lægger altid flest mulige opslag udenfor løkken - uagtet, at det er et brud på mine principper. Koden skal dog ikke være ret stor, før jeg optimerer mest muligt.

Problemet omkring JS er, at de aller færreste JavaScriptere er programmører, som har viden om - eller bare fornemmelse for - hvad der sker i kodelagene under JS-laget. Indlæringskurven er meget flad, og det gør, at alle mulige har haft deres ukyndige hænder dybt begravet i mange af de mest populære JS-libraries.

Som du ved, er jeg mildt sagt ikke glad for libraries som jQuery - og det skyldes netop, at hele kernen er én lang gang dårlig optimeret kode. Som eksempel bruges (og genbruges) ARRAY.push en masse steder. Jeg har lige testet, og push er stadig langsom i de fleste browsere (ganske som ventet er forskellen dog mindst i Safari).

Også jQuery's $.each og jQuery.each bruges et hav af gange internt - på trods af, at de performer ad H til! Afhængig af browser performer $.each således 2-5 gange dårligere end en helt almindelig for/in løkke. Metoderne bruges næsten ligemeget, hvad man foretager sig med lib'et, hvorved den dårlige performance multipliceres op mange gange. Det mærkes meget tydeligt ved lidt større applikationer.

Og så har vi endda kun talt om et par enkelte af de mange ting, der har indflydelse på performance af JS-kode. I virkeligheden er der bunker at tage fat på  *o)
Avatar billede olsensweb.dk Ekspert
12. april 2011 - 21:39 #16
>men personligt ville jeg nok ikke kaste mig ud i Duff's Device i situationer som denne:
den holder jeg mig osse fra, lidt overkill :)

det var vist sent da du skrev indlægget
while(--lng){ vil ikke virke, da 0 er false :), og vi skal bruge index 0
Avatar billede expnet Seniormester
15. april 2011 - 10:45 #17
Jeg vil takke for de kommentar der kommet.
Og så vil jeg prøve at følgende nogle af de råd der kommet
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 2 03/02/202614:19 04/04/202616:02
Å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
04/0409:43 AI google.com Af Peter Olsen i Andre onlineløsninger
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 »