Šis raksts ilustrē JavaScript HTML DOM ievades izvēles rūtiņas “atspējota” rekvizīta mērķi, darbību un lietojumu.
Kā JavaScript darbojas HTML DOM ievades izvēles rūtiņas rekvizīts “atspējots”?
Ievades izvēles rūtiņa ' invalīds ” rekvizīts ir atkarīgs no atribūta “checkbox”. Tas darbojas HTML formās un ievades laukos, lai atspējotu un atspējotu norādītās izvēles rūtiņas.
Sintakse (iestatiet atspējoto rekvizītu)
izvēles rūtiņaObject. invalīds = taisnība | viltusSaskaņā ar definēto atgriešanas sintaksi rekvizīts “atspējots” atbalsta divus parametrus, kas ir norādīti šādi:
- taisnība: Tas norāda, ka atbilstošā izvēles rūtiņa ir atspējota.
- false (noklusējuma vērtība): Tā ir izvēles vērtība, kas norāda, ka saistītā izvēles rūtiņa nav atspējota.
Atgriezt (atgriezt atspējoto īpašumu)
izvēles rūtiņaObject. invalīdsIepriekš minētajā sintaksē ' izvēles rūtiņaObject 'atbilst HTML' izvēles rūtiņa ” elements.
Izmantosim iepriekš definētās sintakses zemāk esošajos piemēros, lai izprastu rekvizīta “invalīds” praktisko ieviešanu.
1. piemērs: Ievades izvēles rūtiņas “atspējota” rekvizīta lietošana Pamata sintakses izmantošana
Pirmajā piemērā ir pievienota izvēles rūtiņa, lai to atspējotu, izmantojot definēto vispārināto sintaksi.
HTML kods
Vispirms analizējiet doto HTML kodu:
< ķermeņa stils = 'text-align: center' >
< h2 > HTML DOM ievade Izvēles rūtiņa atspējots rekvizīts JavaScript h2 >
Izvēles rūtiņa : < ievades veids = 'izvēles rūtiņa' id = 'demo' > Veidlapa ir iesniegta < br >< br >
< lpp > Dotā izvēles rūtiņa ir atspējota lpp >
Iepriekš minētajās koda rindās:
- ' ' tags norāda pamatdaļas sadaļu, kas ir līdzināta ' centrs ' ar '' palīdzību stils ” atribūts.
- ' ” tags nosaka 2. līmeņa apakšvirsrakstu.
- '
' tags izveido 'izvēles rūtiņu', norādot ievades veidu ' izvēles rūtiņa 'kam ir piešķirts ID' demo ”. - ' ” tags pievieno rindkopas elementu, lai parādītu iegūto rezultātu.
JavaScript kods
Tālāk apskatiet JavaScript kodu:
< skripts >dokumentu. getElementById ( 'demo' ) . invalīds = taisnība ;
skripts >
Iepriekš minētajā koda fragmentā ' document.getElementById() Metode tiek izmantota, lai izgūtu izvēles rūtiņu, izmantojot tās id “demo”, un rekvizīta “disabled” vērtība ir iestatīta uz “ taisnība ”, kas atspējo izvēles rūtiņu.
Izvade
Iepriekš minētā izvade apstiprina, ka dotā izvēles rūtiņa ir atspējota, jo ir “ invalīds ' rekvizīts iestatīts uz ' taisnība ”.
2. piemērs: Ievades izvēles rūtiņas “atspējota” rekvizīta vērtības atgriešana
Šajā piemērā tiek lietots rekvizīts “atspējots”, lai atgrieztu atlasītās izvēles rūtiņas statusu kā Būla vērtību (true/false).
HTML kods
Apsveriet šādu HTML kodu:
< ķermeņa stils = 'text-align: center' >< h2 > HTML DOM ievade Izvēles rūtiņa atspējots rekvizīts JavaScript h2 >
Izvēles rūtiņa : < ievades veids = 'izvēles rūtiņa' invalīds = taisnība id = 'demo' > Veidlapa ir iesniegta < br >< br >
< p id = 'paraugs' > lpp >
Iepriekš minētajā koda blokā:
- Ir piešķirta izvēles rūtiņa un statuss “ invalīds ' rekvizīts ir iestatīts uz ' taisnība ”.
- Pēc tam tukša ' ” elements tiek pievienots ar piešķirto id “sample”, lai pievienotu izvadi.
JavaScript kods
Tagad pārejiet uz JavaScript kodu:
< skripts >tur ir = dokumentu. getElementById ( 'demo' ) . invalīds ;
dokumentu. getElementById ( 'paraugs' ) . innerHTML = a ;
skripts >
Iepriekš minētajā kodā:
- Mainīgais ' a ' izmanto ' document.getElementById() ” metodi, lai piekļūtu izvēles rūtiņai, izmantojot tās id “demonstrācija”, un saistītu ar “ invalīds ” rekvizītu, lai pārbaudītu, vai ienestā izvēles rūtiņa ir atspējota.
- Atkārtoti lietotā metode “document.getElementById()” ienes iekļauto tukšo rindkopu un parāda rekvizīta “disabled” statusu kā rindkopu.
Izvade
Kā analizēts, rezultāts atgriež piešķirto statusu “izvēles rūtiņa”, t.i., “ taisnība ”.
3. piemērs. Atspējojiet un atspējojiet izvēles rūtiņu, izmantojot ievades izvēles rūtiņu Īpašums “atspējots”
Papildus izvēles rūtiņas statusa iestatīšanai un atgriešanai rekvizīts “atspējots” ļauj lietotājiem vienlaikus atspējot un atspējot izvēles rūtiņu. Apskatīsim to praktiski.
HTML kods
Pārskatīsim uzrakstīto HTML kodu:
< ķermeņa stils = 'text-align: center' >< h2 > HTML DOM ievade Izvēles rūtiņa atspējots rekvizīts JavaScript h2 >
Izvēles rūtiņa : < ievades veids = 'izvēles rūtiņa' id = 'demo' > Veidlapa ir iesniegta ievade >< br >< br >
< pogu onclick = 'checkDisable()' > Atspējojiet izvēles rūtiņu pogu >
< pogu onclick = 'checkUndisable()' > Atspējojiet izvēles rūtiņu pogu >
Iepriekš minētajā koda blokā:
- Tāpat iekļaujiet izvēles rūtiņu un pievienojiet pogu ar ' onclick notikums, kas izpilda checkDisable() ” funkciju, noklikšķinot uz pogas.
- Pēc tam tiek pievienota otrā poga, kas arī izmanto “onclick” notikumu apdarinātāju, lai izpildītu “ checkUndisable() ” funkcija, kad poga noklikšķina.
JavaScript kods
Pēc tam izpildiet tālāk norādīto kodu:
< skripts >funkciju pārbaude Atspējot ( ) {
dokumentu. getElementById ( 'demo' ) . invalīds = taisnība ;
}
funkciju pārbaudeAtspējot ( ) {
dokumentu. getElementById ( 'demo' ) . invalīds = viltus ;
}
skripts >
Iepriekš minētajās koda rindās:
- Definējiet funkciju ar nosaukumu ' checkDisable() ', kas attiecas uz ' document.getElementById() ” metodi, lai piekļūtu izvēles rūtiņai, izmantojot tās id “demo” un iestatītu tās vērtību uz “true”.
- Otrā funkcija ' checkUndisable() ” funkcija atkal izmanto metodi “document.getElementById()”, lai vēlreiz piekļūtu izvēles rūtiņai un iestatītu tās vērtību uz “false”, ja lietotājs noklikšķina uz iekļautās otrās pogas ar nosaukumu “Atspējot izvēles rūtiņu”.
Izvade
Izvade “atspējo” doto izvēles rūtiņu, kad lietotājs noklikšķina uz pirmās pogas, un “atslēdz” to, ja lietotājs attiecīgi noklikšķina uz otrās pogas.
Secinājums
Programmā JavaScript HTML DOM ievades izvēles rūtiņa ' invalīds ” rekvizīts palīdz lietotājiem iestatīt un atgriezt “izvēles rūtiņas” atzīmēto statusu. Tas definē vispārinātās sintakses gan “iestatīšanas”, gan “atgriešanas” procesiem. Tās iestatītā sintakse darbojas uz divām vērtībām ' taisnība ' un ' viltus ”. No otras puses, tā atgriešanas sintakse neprasa nekādus parametrus. Šajā rakstā tika parādīts JavaScript HTML DOM ievades izvēles rūtiņas rekvizīta “atspējots” mērķis, darbība un praktiskā ieviešana.