jQuery Kort gezegd HTML-formulieren en jQuery

Schakel formulierelementen uit / in

Met jQuery kunt u eenvoudig formulierelementen uitschakelen door de waarde voor uitgeschakeld kenmerk van een formulierelement in te schakelen. Om dit te doen, selecteren we gewoon een invoer en gebruiken we de attr () methode, stellen we het uitgeschakelde attribuut van de invoer in op een waarde van uitgeschakeld.

        

Om een ​​uitgeschakeld formulierelement in te schakelen, verwijderen we eenvoudig het uitgeschakelde attribuut met removeAttr () of stel de uitgeschakelde attribuutwaarde in om leeg te zijn met attr ().

        

Bepalen of een formulierelement is uitgeschakeld of ingeschakeld

De formulefilteruitdrukkingen van jQuery gebruiken : disabled of :ingeschakeld, het is vrij eenvoudig om te selecteren en te bepalen (Booleaanse waarde) als een formulierelement is uitgeschakeld of ingeschakeld. Bestudeer de onderstaande code voor verduidelijking.

         

Een enkel selectievakje of keuzerondje selecteren / wissen

U kunt een keuzerondje voor een radio- of selectievakje selecteren door het in te stellen gecontroleerd attribuut aan waar de ... gebruiken attr ().

         

Om een ​​invoer of selectie van een keuzerondje te wissen, verwijdert u eenvoudigweg het aangevinkte kenmerk met behulp van de removeAttr () methode of stel de gecontroleerd waarde toekennen aan een lege tekenreeks.

         

Meerdere selectievakjes selecteren of wissen of ingangen voor radioknoppen

U kunt jQuery's gebruiken val () op meerdere selectievakje-ingangen of radioknopingangen om de ingangen in te stellen op aangevinkt. Dit wordt gedaan door het val () methode een array met een tekenreeks die samenvalt met het selectievakje of het kenmerk voor de invoerwaarde van de radio-knop.

           

Opmerkingen: Als het selectievakje of keuzerondje al is geselecteerd, gebruikt u val () zal het invoerelement niet wissen.


Bepalen of een selectievakje of keuzerondje is geselecteerd of gewist

We kunnen bepalen of een selectievakje-invoer of invoer van een radioknop is geselecteerd of gewist met behulp van de : aangevinkt form filter. Bestudeer de onderstaande code voor verschillende gebruiksmogelijkheden van de : aangevinkt filter.

         

Hoe te bepalen of een formulierelement verborgen is

U kunt bepalen of een formulierelement verborgen is met behulp van de :verborgen form filter. Bestudeer de onderstaande code voor verschillende gebruiksmogelijkheden van de : aangevinkt filter.

        

De waarde van een invoerelement instellen / verkrijgen

De val () methode kan worden gebruikt om de kenmerkwaarde van een invoerelement in te stellen en te krijgen (knop, selectievakje, verborgen afbeelding, wachtwoord, radio, reset, verzenden, tekst). Hieronder stel ik de waarde in voor elke invoer val () en waarschuw de waarde met behulp van de val () methode.

                

De geselecteerde optie van een select element instellen / verkrijgen

De ... gebruiken val () methode, kunt u de geselecteerde waarde van a instellen element, gebruik de val () methode opnieuw om te bepalen welke optie is geselecteerd. De val () methode in dit scenario retourneert de attribuutwaarde van de geselecteerde optie.

        

Geselecteerde opties van een multi-selectie-element instellen / verkrijgen

De ... gebruiken val () methode kunnen we de geselecteerde waarden van een multi-select element instellen door de val () methode een array met de bijbehorende waarden.

Om de geselecteerde opties in een multi-select-element te krijgen, gebruiken we opnieuw de val () methode om een ​​array met de geselecteerde opties op te halen. De array bevat de waarde-attributen van de geselecteerde opties.

        

Tekst plaatsen / ontvangen binnen een a

Instellen / verkrijgen van de waarde-eigenschap van een knopelement

U kunt het waardekenmerk van een knopelement instellen door de val () methode een tekenreeks. Gebruik de knop om de waarde van een knopelement te krijgen val () methode opnieuw om de tekst op te halen.

        

Bewerken Selecteer elementen

jQuery maakt een aantal van de algemene taken die horen bij het bewerken van bepaalde elementen triviaal. Hieronder zijn enkele van die taken met gecodeerde voorbeelden.

 // Voeg opties toe aan een select element aan het einde $ ('select'). Append (''); // Voeg opties toe aan het begin van een select element $ ('select'). Prepend (''); // Vervang alle opties door nieuwe opties $ ('select'). Html (''); // Vervang items op een bepaalde index met behulp van de: eq () filter selecteren // het element selecteren en dan vervangen door de methode .replaceWith () $ ('selecteer optie: eq (1)'). ReplaceWith (''); // Stel de geselecteerde optie van de geselecteerde elementen in op index 2 $ ('selecteer optie: eq (2)'). Attr ('selected', 'selected'); // Verwijder de laatste optie uit een select element $ ('selecteer optie: laatste'). Remove (); // Selecteer een optie uit een geselecteerd element via de // -volgorde in de wrapper die is ingesteld met behulp van aangepaste filters $ ('# selecteer optie: eerste'); $ ('# selecteer optie: laatste'); $ ('# selecteer optie: eq (3)'); $ ('# selecteer optie: gt (5)'); $ ('# selecteer optie: lt (3)'); $ ('# selecteer optie: niet (: geselecteerd)'); // Haal de tekst op van de geselecteerde optie (s), dit zal de tekst van // alle opties teruggeven die geselecteerd zijn wanneer het gaat om een ​​multi-select element $ ('selecteer optie: geselecteerd'). Text (); // Haal de waarde value attribuutwaarde van een optie in een select element $ ('selecteer optie: last'). Val (); // Het krijgen van het: laatste optie-element // Haal de index op (0-index) van de geselecteerde optie. // Opmerking: werkt niet met multi-select-elementen. $ ('selecteer optie'). index ($ ('selecteer optie: geselecteerd')); // Voeg een optie toe na een bepaalde positie $ ('selecteer optie: eq (1)'). After (''); // Voeg een optie vóór een bepaalde positie $ ('selecteer optie: eq (3)'). Before ('');

Formulierelementen selecteren op type

Het is mogelijk om formulierelementen te selecteren op hun type, bijv. $ ( 'Ingang: checkbox'). jQuery biedt de volgende vormtypefilters voor het selecteren van formulierelementen op basis van hun type.

  • :tekst
  • :wachtwoord
  • :radio
  • : checkbox
  • : indienen
  • :beeld
  • : reset
  • :het dossier
  • :knop

Alle formulierelementen selecteren

U kunt alle formulierelementen selecteren met behulp van de :invoer form filter. Dit filter selecteert meer dan alleen invoerelementen, het selecteert een willekeurig element