Beispiel für JavaScript -Betriebsformular Erläuterung (Teil 2)

Autor：Eve Cole Aktualisierungszeit：2025-07-05 03:16:01

Im vorherigen Artikel habe ich Ihnen das relevante Wissen über die Beispielerklärung des JS -Betriebsformulars (Teil 2) vorgestellt. In diesem Artikel werden Sie in die Beispielerklärung des JavaScript -Betriebsformulars (Teil 2) vorgestellt. Die spezifischen Details sind wie folgt:

1. Textfeld

 <Eingabe type = "text" />

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

Betreiben Sie den Wert des Textfelds

Value -Eigenschaft festgelegt oder Wert erhalten

2. Tasten Radio und Multi-Selekten

 <Eingabe type = "radio" /> <Eingabe type = "CheckBox" />

Überprüfung der Rückgabe oder setzen Sie den ausgewählten Status der Einzelauswahl ein

True Selected Falsch nicht ausgewählt

Das Wertattribut erhält den ausgewählten Wert und muss zuerst den ausgewählten Zustand bestimmen.

Beispiel: Wählen Sie alle/nicht alle/umgekehrt aus

1.Png

1.Dom Struktur

 <body> <form name = "myForm" action = "#" method = "post" id = "form1"> <script type = "text /javaScript"> für (var i = 0; i <20; i ++) {document.write ("<Eingabe type = 'Checkbox' Name 'nums' />"+(i+1). All "); document.write (" <Eingabe type = 'radio' name = 'radios'> Wählen Sie alle "); document.write (" <Eingabe type = 'Radio' name = 'Radios'> Wählen Sie alle "); document.write (" <Eingabe type = 'Radio' name = 'Radios'> Alle "); document.write (" <Eingabe type = 'radio' name = 'radios'> anti-select "); </script> </form> </body>

2. Skript

2.1 Verwenden der Methode zum Aufrufen von Funktionen

 <script type = "text/javaScript"> window.onload = function () {var nums = document.getEnementsByName ("nums"); var radios = document.getElementsByname ("radios"); Fun (nums, i, funkios); Funktionspilz (a, b, c) {c [b] .Onclick = function () {if (b = {für (für) {b] .onclick = function () {if () {if () {if () {if (b == 0) {für ((b]. i = 0; i <A.Length; i ++) {a [i] .Checked = true;}} else if (b == 1) {für (var i = 0; i <A.Length; i ++) {a [i] .Checked = false;}} else if (b == 2) {for (var var i = 0; i <A.Length; i ++) {if (a [i]. Checked) {a [i]. Checked = false;} else {a [i] .Checked = true;}}}}} </script>

2.2 Verwenden der Methode zum Erstellen anonymer Funktionen in einem Verschluss

 <script type = "text/javaScript"> window.onload = function () {var nums = document.GetElementsByName ("nums"); var radios = document.getEmlementsName ("radios"); für (var i = 0; i <radios.length; i ++) {function (a) {{{Radios [a]. i = 0; i <nums.Length; i ++) {nums [i] .Checked = true;}} else if (a == 1) {für (var i = 0; i <numsgth; i ++) {nums [i] .Checked = false;}} sonst (a == 2) {für (var i = 0; i <nums.Length; i ++) {if (nums [i]. Checked) {nums [i]. Checked = false;} else {nums [i]. Checked = true;}}}}}) (i);}} </script>

3. Pulldown Box

 <Formular name = "myForm"> <select name = "sels"> <option> peking Universität </option> <option> Chang'an Universität </option> <option> Nanjing Universität </option> </select> </form>

Ausgewählter Satz oder zurück in den ausgewählten Status des Dropdown-Feldes

True Selected Falsch nicht ausgewählt

SelectedIndex Set oder zurückgeben die im Dropdown-Feld ausgewählte Indexnummer oder zurück

Beispiel1: Wählen Sie Chang'an University aus

 <Script> var sels = document.myform.sels; // var sels = document.myform.sels.options; // (es ist auch möglich) SELS [1] .Selected = true; </script>

oder

 <Script> var sels = document.myform.sels; // var sels = document.myform.sels.options; // (es ist auch möglich) sels.selectedIndex = 1; </script>

Beispiel2: Einheitspreis * Menge = Gesamtpreis

1.Png

1.Dom Struktur

 <Body> <Formular name = "myForm" action = "#" method = "post" id = "Form1"> Einheitspreis: <Eingabe type = "text" name = "preis" value = "200"> <select name = "count"> Menge <option> 1 </option> <option> 2 </option> <option> 3 </option> </select actum> </body> </body> </tection> tection

2. Skript

 <script type = "text/javaScript"> window.onload = function () {var price = document.myform.price; var count = document.myform.count; var total = document.myform.total; count.onchange = function () {total.Value = pareInt (preis (value)*(count.seltex); }} </script>

4. Textbereich

Der Wert gibt den Wert des Textbereichs zurück oder legt sie fest

Beispiel: Erkennen Sie dynamisch die Länge der im Textbereich eingegebenen Zeichen

1.Png

1.Dom Struktur:

 <body> <div id = "content"> Insgesamt 20 Zeichen können eingegeben, 0 eingegeben und 20 eingegeben werden.

2. Skript: Skript:

 <script type = "text/javaScript"> window.onload = function () {var content = document.getElementById ("content"); var info = document.myform.info; "+strs+" -Sports wurden eingegeben, und "+Länge+" kann ebenfalls eingegeben werden, und "+(strs-länge)+" S "kann auch eingegeben werden;} else {info.value = str.substring (0, strs);}} // chinesische und englische Funktionsprüfung (str) {var num = 0; for (var i = 0; i <Str.Length; i ++) {if (str.charCodeat (i)> = 0 && str.arCodeat (i) <= 255) {// englische Num ++;} else {// chinesische num+= 2;}} return num;}} </script>

5. Formüberprüfung

ONSUBMIT -Ereignis abgefeuert, wenn das Formular eingereicht wird

 <Formular name = "myForm" action = "www.baidu.com" method = "post" onsubmit = "return check (this)"> </form> return false; // Blockieren Sie das Formular Standardverhalten

6. Methode einreichen

Diese Methode wird verwendet, um die automatische Einreichung zu implementieren

Ereignis OnSubmit kann nur verwendet werden, um manuell zu reichen

Das obige ist eine Beispielerlation für das vom Editor eingeführte JavaScript -Betriebsformular (Teil 2). Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!