Avaleht
uus teema   vasta Tarkvara »  Programmeerimine »  checkbox enable disable javascript märgi kõik teemad loetuks
märgi mitteloetuks
vaata eelmist teemat :: vaata järgmist teemat
Hinnavaatlus :: Foorum :: Uudised :: Ärifoorumid :: HV F1 ennustusvõistlus :: Pangalink :: Telekavad :: HV toote otsing
autor
sõnum Saada viide sõbrale.  :: Teata moderaatorile teata moderaatorile
otsing:  
janeklass
HV vaatleja

liitunud: 13.05.2009




sõnum 26.12.2009 22:26:11 checkbox enable disable javascript vasta tsitaadiga

Tere mul sihuke küsimus et kuidas ma saaks checkboxile panna linnukesed ja ära võtta ühe ja sama nupuga.
endal kood praega sihuke:

js:

function tseki(id){
vorm = document.getElementById(id).elements;
for(x in vorm){
if(vorm[x].type == "checkbox"){
vorm[x].checked = "true";



}
}

}
HTML:
<form id="vorming1">
<input type="checkbox"><br>
<input type="checkbox"><br>
<input type="checkbox"><br>
<input type="checkbox"><br>
<input type="checkbox"><br>
</form>
<input type="button" onClick=tseki("vorming1") value="Linnukesed k?ikidesse">


See kood paneb linukesed aga ära ei võta,aga tahaks et sama nupp võtaks ned ära ka.
tagasi üles
vaata kasutaja infot saada privaatsõnum
mikk36
HV Guru
mikk36

liitunud: 21.02.2004




sõnum 27.12.2009 00:33:25 vasta tsitaadiga

Kasutaks sa jQuery frameworki oleks lihtne:
http://docs.jquery.com/Attributes/attr#keyvalue
http://docs.jquery.com/Attributes/removeAttr#name
Kommentaarid: 85 loe/lisa Kasutajad arvavad:  :: 0 :: 2 :: 78
tagasi üles
vaata kasutaja infot saada privaatsõnum
i8080
Kreisi kasutaja
i8080

liitunud: 15.03.2002



Autoriseeritud ID-kaardiga

sõnum 27.12.2009 01:02:43 vasta tsitaadiga


...
if(vorm[x].type == "checkbox")
{
  if (vorm[x].checked == true)
    vorm[x].checked = false;
  else
    vorm[x].checked = true;
}
...
Kommentaarid: 169 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 151
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
andrusny
Kreisi kasutaja
andrusny

liitunud: 20.03.2006




sõnum 27.12.2009 01:14:10 vasta tsitaadiga

Kui tahad, et su kood ka IE peal t öötaks (võimalik, et veel mõni teine browser) unusta selline for kohe ära
for(x in vorm){


IE ei ole x number vaid mingi veider kirje.
Kasuta tava loendurit

for(i=0;i<vorm.length;i++){

_________________


viimati muutis andrusny 27.12.2009 01:18:16, muudetud 1 kord
Kommentaarid: 7 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 7
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
mikk36
HV Guru
mikk36

liitunud: 21.02.2004




sõnum 27.12.2009 01:17:38 vasta tsitaadiga

"var x" lahendaks ka probleemi.
Kommentaarid: 85 loe/lisa Kasutajad arvavad:  :: 0 :: 2 :: 78
tagasi üles
vaata kasutaja infot saada privaatsõnum
andrusny
Kreisi kasutaja
andrusny

liitunud: 20.03.2006




sõnum 27.12.2009 01:23:18 vasta tsitaadiga

proovisin, ei lahenda, ma vaatasin, mis see x on seal see on mingi jura. Midagi taolist, siin on tema näidiskoodi x välja toodud IE peal

tsitaat:
nextSiblingonresizeendonrowenteraria-haspopupchildNodesondragleavecanHaveHTMLonbeforepasteondragoveronbeforecopyaria-disabledonpagerecordNumberpreviousSiblingnodeNameonbeforeactivateaccessKeycurrentStylescrollLeftonbeforeeditfocusoncontrolselectaria-hiddenonblurhideFocusclientHeightstyleonbeforedeactivatediraria-expandedonkeydownnodeTypeondragstartonscrollonpropertychangeondragenteridaria-levelonrowsinsertedscopeNamelangonmouseuparia-busyoncontextmenulanguagescrollTopoffsetWidthonbeforeupdateonreadystatechangeonmouseenterfiltersonresizeisContentEditablearia-checkedaria-readonlyoncopyonselectstartscrollHeightonmoveondragendonrowexitlastChildaria-

_________________
Kommentaarid: 7 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 7
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
Redikate
HV veteran
Redikate

liitunud: 30.12.2005




sõnum 27.12.2009 01:30:26 vasta tsitaadiga

i8080 kirjutas:

...
if(vorm[x].type == "checkbox")
{
  if (vorm[x].checked == true)
    vorm[x].checked = false;
  else
    vorm[x].checked = true;
}
...


Postisin siin ennist ise sama kuid post läks delete, sest seee kood lihtsalt "vahetab" checkboxi checked staatud. Aga kui kasutaja juba mõne on chekkinud, siis ta ei tühjenda neid ära vaid "vahetab" need lihtsalt unchecked vastu ja ülejäänud checkib ära.
Kommentaarid: 34 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 33
tagasi üles
vaata kasutaja infot saada privaatsõnum
i8080
Kreisi kasutaja
i8080

liitunud: 15.03.2002



Autoriseeritud ID-kaardiga

sõnum 27.12.2009 01:59:20 vasta tsitaadiga

no kui tahta peensust ja täiust taga ajama hakata, siis läheb asi suht pikaks ja segaseks kätte ära ja küsija võib sellega hiljem ise edasi tegelda.
selleks peaks kasutaja poolt tehtud klikkide tarvis kas eraldi input-hidden väljasid hoidma või eraldi muutujaid vms arrayd, et kasutaja poolt juba tehtud valikuid mitte override-da. see selleks...
algsest teema küsimusest lähtudes ja siin vahepealseid IE soovitusi arvesse võttes ehk saab ka sedasi
var checked = false;

function tseki(id)
{
  if (checked)
    checked = false;
  else
    checked = true;
     
  vorm = document.getElementById(id).elements;
  for(i=0; i < vorm.length; i++)
  {
    var el = vorm[i];
    if(el.type == "checkbox")
    {
      el.checked = checked;
    }
  }
}
Kommentaarid: 169 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 151
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
nene
Kreisi kasutaja
nene

liitunud: 20.03.2004




sõnum 27.12.2009 02:24:29 vasta tsitaadiga

Alustuseks on su praeguses koodis mitmeid probleeme, mis küll hetkel ei mõjuta su koodi toimimist, kuid mis pikemas perspektiivis võivad valusalt kätte maksta, kui sa neile varakult tähelepanu ei pööra.

  • Trepi oma koodi. Treppimata kood lihtsalt pole aktsepteeritav. Punkt.
  • Uute muutujate defineerimisel tuleks alati kirjutada muutuja nime ette var, et defineerida see kohaliku muutujana - vastasel juhul tekitab JavaScript globaalse muutuja ning palju globaalseid muutujaid pole kunagi hea.
  • == operaatori asemel kasuta alati ===, esimese kasutamisel teeb JavaScript tüübiteisendusi, mille tulemused pole sageli intuitiivsed, näiteks "01" == true, aga "02" != true.
  • "true" asemel kasuta ikka true.
  • for (... in ...) { tsükkel on mõeldud objektide jaoks, massiivide puhul kasuta ikka vana head for (...; ...; ...) { tsüklit. Esimese kasutamisel massiividega võivad juhtuda kummalised asjad - mõnikord mõnes brauseris töötab, teinekord jälle teises brauseris mitte.
  • .elements asemel kasuta .getElementsByTagName() meetodit, et pärida vaid seda tüüpi elemendid, mis sind tegelikult huvitavad.

Eelnevaid nõuanded järgides oleks su kood umbes selline:

javascript:
  1. function tseki(id) {
  2.   var inputs = document.getElementById(id).getElementsByTagName("input");
  3.   for (var i = 0; i < inputs.length; i++) {
  4.     if (inputs[i].type === "checkbox") {
  5.       inputs[i].checked = true;
  6.     }
  7.   }
  8. }


See funktsioon muidugi üksnes linnutab ära kõik kastikesed, sest checked atribuudile omistatakse true. Võiksid kirjutada samasuguse funktsiooni, kus true asemel oleks false - see siis eemaldaks kõik linnukesed. Aga kahe sellise pea-aegu samasuguse funktsiooni kirjutamine oleks muidugi tobe. Palju parem oleks lihtsalt lisada parameeter, mis määraks, kas linnukesed lülitatakse sisse või välja. Näiteks nii:

javascript:
  1. function setChecked(id, checked) {
  2.   var inputs = document.getElementById(id).getElementsByTagName("input");
  3.   for (var i = 0; i < inputs.length; i++) {
  4.     if (inputs[i].type === "checkbox") {
  5.       inputs[i].checked = checked;
  6.     }
  7.   }
  8. }


Sellisest funktsioonist piisaks, kui sul oleks tarvis kahte nuppu, üht sisse- ja teist väljalülitamiseks:

<input type="button" onClick='setChecked("vorming1", true);' value="Linnukesed sisse">
<input type="button" onClick='setChecked("vorming1", false);' value="Linnukesed välja">


Sul aga on tarvis vaid ühte nuppu, mis esimesel vajutamisel lülitaks kõik sisse, teisel korral kõik välja, siis jälle kõik sisse jne. Tavaliselt nimetatakse taolist funktsionaalsus sõnaga "toggle", ning ühe lisamuutuja ja juba olemasoleva setChecked() abil on sellist funktsiooni üsna lihtne kirjutada:

javascript:
  1. var checked = false;
  2. function toggle(id) {
  3.   checked = !checked; // pöörame muutuja väärtuse vastupidiseks
  4.   setChecked(checked);
  5. }


See töötab, kuid sel on üks tõsine probleem, kuna muutuja checked on globaalne, siis ei toimi see kood juhul kui lehel on rohkem kui üks kastikeste grupp mida on tarvis sisse-välja lülitada. Selle lahendamiseks on mitmeid viise, kuid alustuseks on vast üks lihtsamaid järgmine, kus muutuja checked väärtuseks pole mitte lihtne true/false vaid objekt, milles peetakse meeles iga ID kohta true/false väärtus:

javascript:
  1. var checked = {}; // uus tühi objekt
  2. function toggle(id) {
  3.   // kui id-nimelist välja veel pole, siis saab see väärtuseks true
  4.   // kui väli olemas, siis lihtsalt pöörame selle väärtuse vastupidiseks
  5.   checked[id] = !checked[id];
  6.   setChecked(checked[id]);
  7. }


Nagu mikk36 juba mainis, siis jQuery abil on seda kõike vast palju lihtsam teha. Samas alustuseks kulub ära endale ka mõningad JavaScripti põhitõed selgeks teha.

_________________
Mõistus otsas? Pane pinusse...
Kommentaarid: 24 loe/lisa Kasutajad arvavad:  :: 0 :: 1 :: 23
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
Negaal
HV vaatleja
Negaal

liitunud: 03.10.2008




sõnum 28.12.2009 20:06:13 vasta tsitaadiga

miks ma kasutan jquerit?

var hihi = 0;
$('#päästik').click(function(){
hihi++
$('.alluvad').attr('checked', hihi%2=0?false:true)
})
Kommentaarid: 3 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 3
tagasi üles
vaata kasutaja infot saada privaatsõnum
inzinz
HV kasutaja

liitunud: 26.01.2005




sõnum 30.12.2009 17:55:19 vasta tsitaadiga

Siin paljud näited ja soovitused on üks ühest otsast kipakas ja teine teisest otsast (ka nene poolt toodud põhjalikud näited on minu arvates ülepingutamine).

function checkUncheckAll(cb) {
    if(!cb) return;
    var f = cb.form;
    var state = cb.checked;
    for(var i = 0; i < f.elements.length; i++) {
        var elem = f.elements[i];
        if(elem.type.toLowerCase() == 'checkbox') {
            elem.checked = state;
        }
    }
}

Üks lihtne funktsioon, ei mingeid global muutujaid, ei mingit spetsiaalset vormi id etteandmist, eelduseks on see et vastav checkbox mida klikitakse on sama formi sees (korrektses html koodis peavadki formi input elemendid asuma formi tagide vahel). Selleks, et vältida submittimisel selle toggle checkboxi nime ja väärtuse kaasa minemist, peab selle checkboxi name ja value atribuudid olema seadistamata. Lisaks on automaatselt kaitstud ka need juhud, kui keegi geniaalselt/kogemata otsustab html's panna type="CHECKBOX" mispeale päris mitmed eelpool toodud näited sellist checkboxi checkboxiks ei tunnistaks.

Vastav html oleks siis:

<form>
<input type="checkbox" name="midagi1" /><br />
<input type="checkbox" name="midagi2" /><br />
<input type="checkbox" name="midagi3" /><br />
<input type="checkbox" name="midagi4" /><br />
<input type="checkbox" name="midagi5" /><br />
<input type="checkbox" onchange="checkUncheckAll(this)" />
</form>

NB! onclick asemel on parem kasutada checkboxi puhul onchange, kuna sellisel juhul on automaatselt kaetud kõik muud juhud mismoodi checkboxi muuta annaks (näiteks <label for="checkboxi_id">kliki mind</label> abiga mugavamaks tegemine)

_________________
Upload.ee - eestimaine failiupload
Kommentaarid: 4 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 4
tagasi üles
vaata kasutaja infot saada privaatsõnum
näita postitusi alates eelmisest:   
uus teema   vasta Tarkvara »  Programmeerimine »  checkbox enable disable javascript
[vaata eelmist teemat] [vaata järgmist teemat]
 lisa lemmikuks
näita foorumit:  
 ignoreeri teemat 
sa ei või postitada uusi teemasid siia foorumisse
sa ei või vastata selle foorumi teemadele
sa ei või muuta oma postitusi selles foorumis
sa ei või kustutada oma postitusi selles foorumis
sa ei või vastata küsitlustele selles foorumis
sa ei saa lisada manuseid selles foorumis
sa võid manuseid alla laadida selles foorumis



Hinnavaatlus ei vastuta foorumis tehtud postituste eest.