In diesem Artikel wird beschrieben, wie Sie Optionspunkte, Kontrollkästchen und Dropdown-Menüs mit DOM von JS festlegen. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
1. Setzen Sie Optionsfelder
Das Optionsfeld befindet sich im Formular <Eingabe -Typ = "Radio" />. Es handelt sich um eine Reihe von Objekten, die Benutzer auswählen können, aber nur einer kann gleichzeitig ausgewählt werden. Jedes hat ein überprüftes Attribut, und wenn man es als Ture auswählt, werden die anderen falsch.
Lassen Sie uns zuerst ein Beispiel veröffentlichen:
Kopieren Sie den Code wie folgt: <script type = "text/javaScript">
Funktion getChoice () {
var Oform = document.Forms ["uform1"];
var achoices = oform.camera;
für (i = 0; i <achoices.length; i ++) // Übertragen Sie die gesamte Einzeloptionstabelle
if (achoices [i].
brechen;
Alert ("Kamera Marke ist:" + Achoices [i] .Value);
}
Funktion setChoice (Inum) {
var Oform = document.Forms ["uform1"];
Oform.Camera [Inum].
}
</script>
<form method = "post" name = "uform1" action = "addInfo.aspx">
Kamera Marke:
<p>
<Eingabe type = "radio" name = "camera" id = "Canon" value = "Canon">
<Label für = "Canon"> Canon </label>
</p>
<p>
<Eingabe type = "radio" name = "camera" id = "nikon" value = "nikon">
<label für = "nikon"> nikon </label>
</p>
<p>
<Eingabe type = "radio" name = "camera" id = "Sony" value = "Sony" überprüft>
<Label für = "Sony"> Sony </label>
</p>
<p>
<Eingabe type = "Radio" name = "camera" id = "olympus" value = "olympus">
<label für = "olympus"> olympus </label>
</p>
<p>
<Eingabe type = "radio" name = "camera" id = "samsung" value = "samsung">
<Label für = "Samsung"> Samsung </label>
</p>
<p>
<Eingabe type = "radio" name = "camera" id = "pentax" value = "pentax">
<Label für = "Pentax"> Pentax </label>
</p>
<p>
<Eingabe type = "radio" name = "camera" id = "Andere" value = "Andere">
<Label für = "Andere"> Andere </label>
</p>
<p>
<Eingabe type = "surug" name = "btnsubmit" id = "btnsubmit" value = "arrang">
</p>
<p>
<input type = "button" value = "Ausgewähltes Objekt erkennen" onclick = "getChoice ();">
<input type = "button" value = "auf Canon" onclick = "setChoice (0);">
</p>
</form>
Das Optionsfeld befindet sich im Formular <Eingabe -Typ = "Radio" />. Es handelt sich um eine Reihe von Objekten, die Benutzer auswählen können, aber nur einer kann gleichzeitig ausgewählt werden. Jedes hat ein überprüftes Attribut, und wenn man es als Ture auswählt, werden die anderen falsch.
Aus dem obigen Code ist ersichtlich, dass ID und Name unterschiedlich sind und ihre Namen in einer Reihe von Optionsfeldern gleich sind und nur einer ausgewählt ist. ID ist an <Label> oder andere Optionen gebunden.
Unter dem Code: Der Code zum Überprüfen des ausgewählten Objekts ist (wenn der durcheinanderfolgende Wert eines bestimmten Elements ture ist, endet der Traversal)
Die Codekopie lautet wie folgt: var Oform = document.Forms ["uform1"];
var achoices = oform.camera;
für (i = 0; i <achoices.length; i ++) // Übertragen Sie die gesamte Einzeloptionstabelle
if (achoices [i].
brechen;
Alert ("Kamera Marke ist:" + Achoices [i] .Value);
2. Stellen Sie mehrere Auswahlfelder ein
Im Gegensatz zu Optionsfeldern kann das Kontrollkästchen <Eingabetyp = "CheckBox" /> gleichzeitig zur Verarbeitung ausgewählt werden. Das Kontrollkästchen vor jeder E -Mail in der Mailbox ist eine typische Verwendung.
Kopieren Sie den Code wie folgt: <script type = "text/javaScript">
Funktion CheckBox () {
var str = document.getElementsByName ("Hobby");
var objarray = str.length;
var chestr = "";
für (j = 0; j <objarray; j ++) {
if (str [j]. Checked == true) {
CHESTR + = STR [j] .Value + ",";
}
}
if (chest == "") {
alarm ("Bitte wählen Sie zuerst ein Hobby aus ~!");
} anders {
alarm ("Ihre erste Wahl:" + chestr);
}
}
Funktionsänderungen (Aktion) {
var Oform = document.Forms ["myForm1"];
var Ocheckbox = Oform.Hobby;
für (var i = 0; i <ocheckBox.length; i ++) // Übertragen Sie jede Option
if (Aktion <0) // Reverse Selection
Ocheckbox [i]. Checked =! Ocheckbox [i].
sonst // Wenn die Aktion 1 ist, wählen Sie alle aus und wählen Sie alle aus, alle wählen Sie alle aus
Ocheckbox [i]. Checked = Aktion;
}
</script>
<form method = "post" name = "myForm1" action = "addInfo.aspx">
Dinge, die Sie gerne tun:
<p>
<Eingabe type = "checkbox" name = "hobby" id = "ball" value = "ball">
<Label für = "Ball"> Basketball spielen </label>
</p>
<p>
<Eingabe type = "checkBox" name = "hobby" id = "tv" value = "tv">
<Label für = "TV"> TV ansehen </label>
</p>
<p>
<Eingabe type = "checkBox" name = "hobby" id = "net" value = "net">
<Label für = "net"> im Internet </label>
</p>
<p>
<Eingabe type = "CheckBox" name = "hobby" id = "book" value = "book">
<Label für = "Buch"> Lesen </label>
</p>
<p>
<Eingabe type = "Checkbox" name = "hobby" id = "trip" value = "trip">
<Label für = "Trip"> Travel </label>
</p>
<p>
<Eingabe type = "CheckBox" name = "hobby" id = "musik" value = "musik">
<Label für = "music"> musik </label>
</p>
<p>
<Eingabe type = "CheckBox" name = "hobby" id = "Andere" value = "Andere">
<Label für = "Andere"> Andere </label>
</p>
<p>
<Eingabe type = "Schaltfläche" value = "Alle" onclick = "ChangeBoxes (1);" />
<input type = "button" value = "überhaupt keine Auswahl" onclick = "ChangeBoxes (0);" />
<input type = "button" value = "Anti-Select" onclick = "ChangeBoxes (-1);" />
<input type = "button" value = "suruging" onclick = "CheckBox ()" />
</p>
</form>
Das Kontrollkästchen -Prinzip wird unter Verwendung des untersuchten Attributs Booleschen Wert ermittelt. Wählen Sie alle aus und unvollständige Auswahl kann Parameter in Form von 0 und 1 übergeben.
3. Pulldown-Menü
Das Dropdown-Menü <Select> ist ein häufig verwendetes Formularelement. Wenn das Pulldown-Funkwählbare ist, entspricht die Funktion des Optionsschaltwerks <Eingabe-Typ = "Radio" /> der Funktion der Funk-Selectable-Taste. Wenn multiple = "multiple" multiple selectable ist, entspricht die Funktion dem Kontrollkästchen, aber der genommene Bereich ist viel kleiner als das Kontrollkästchen.
Häufige Eigenschaften von Dropdown-Menüs:
| Eigentum | veranschaulichen |
| Länge | Gibt die Anzahl der Optionen <option> an |
| ausgewählt | Boolescher Wert, der angibt, ob <option> ausgewählt ist |
| SelectedIndex | Die Seriennummer der ausgewählten Option ist -1, wenn keine Option ausgewählt ist. Für das Dropdown-Menü mit mehreren Selekten kehren Sie zum ersten ausgewählten zurück Die Sequenznummer beginnt ab 0 |
| Text | Options Text |
| Wert | Wert der Option |
| Typ | Die Art des Dropdown-Menüs, Einzel-Choice gibt ausgewählte, Multiple-Choice zurück |
| Optionen | Holen Sie sich eine Reihe von Optionen, zum Beispiel: OseLectBox.Options [2], das das dritte Element der OselectBox im Dropdown-Menü angibt |
①. Ziehen Sie das Menü ab, um den Einzelauswahlwert zu erhalten
Kopieren Sie den Code wie folgt: <script Language = "JavaScript">
Funktion Checksingle () {
var Oform = document.Forms ["myForm1"];
var oselectbox = OFOrM.Constellation;
var Ichoice = oselectBox.SelectedIndex; // Ausgewählte Artikel erhalten
alert ("Sie haben" + oselectBox.Options [iChoice] .Text);
}
</script>
<form method = "post" name = "myForm1">
<Label für = "Constellation"> Zodiac -Zeichen: </label>
<p>
<Select id = "Constellation" name = "Constellation">
<Option Value = "Aries" Selected = "Selected"> Aries </Option>
<option value = "taurus"> taurus </option>
<Option Value = "Gemini"> Gemini </option>
<Option Value = "Cancer"> Cancer </Option>
<Option Value = "Leo"> Lion </Option>
<Option value = "virgo"> jungfräulich </option>
<Option Value = "Libra"> Libra </Option>
<option value = "scorpio"> scorpio </option>
<Option Value = "Sagittarius"> Snorker </Option>
<Option Value = "Capricorn"> Capricorn </Option>
<option value = "aquarius"> aquarius </option>
<Option Value = "Pisces"> Pisces </Option>
</select>
</p>
<Eingabe type = "button" onclick = "pureSingle ()" value = "Ansichtoptionen" />
</form>
②. Wenn das Dropdown-Menü mehrfach ausgewählt ist, nehmen Sie den Wert
Kopieren Sie den Code wie folgt: <script type = "text/javaScript">
Funktion checkMultiple () {
var Oform = document.Forms ["myForm1"];
var oselectbox = OFOrM.Constellation;
var Achoices = new Array ();
// Reisen Sie das gesamte Dropdown-Menü
für (var i = 0; i <oselectbox.options.length; i ++)
if (oseselectbox.options [i] .gewählt) // if ausgewählt
Achoices.push (oseselectbox.options [i] .Text); // drücken Sie in das Array
alert ("Sie haben ausgewählt:" + achoices.join ()); // Ausgabeergebnis
}
</script>
<form method = "post" name = "myForm1">
<Label für = "Constellation"> Zodiac -Zeichen: </label>
<p>
<select id = "Constellation" name = "Constellation" multiple = "multiple" style = "height: 180px;">
<Option Value = "Aries"> Aries </Option>
<option value = "taurus"> taurus </option>
<Option Value = "Gemini"> Gemini </option>
<Option Value = "Cancer"> Cancer </Option>
<Option Value = "Leo"> Lion </Option>
<Option value = "virgo"> jungfräulich </option>
<Option Value = "Libra"> Libra </Option>
<option value = "scorpio"> scorpio </option>
<Option Value = "Sagittarius"> Snorker </Option>
<Option Value = "Capricorn"> Capricorn </Option>
<option value = "aquarius"> aquarius </option>
<Option Value = "Pisces"> Pisces </Option>
</select>
</p>
<Eingabe type = "button" onclick = "checkMultiple ()" value = "Ansichtoptionen" />
</form>
③. Allgemeiner Wert (etwas, das einzelne und mehrere Auswahlmöglichkeiten abfährt)
Kopieren Sie den Code wie folgt: <script Language = "JavaScript">
Funktion getSelectValue (Box) {
var Oform = document.Forms ["myForm1"];
var oselectbox = OfOrm.elemente [Box]; // Das entsprechende Auswahl-Dropdown-Menü wird gemäß den Parametern ausgewählt
if (oselectbox.type == "select-one") {// urteilen, ob es sich um eine einzelne oder multiple Choice handelt
var Ichoice = oselectBox.SelectedIndex; // Ausgewählte Artikel erhalten
alert ("Single-Select, Sie haben" + oselectBox.Options [iChoice] .Text) ausgewählt;
} anders {
var Achoices = new Array ();
// Reisen Sie das gesamte Dropdown-Menü
für (var i = 0; i <oselectbox.options.length; i ++)
if (oseselectbox.options [i] .gewählt) // if ausgewählt
Achoices.push (oseselectbox.options [i] .Text); // drücken Sie in das Array
alert ("Multiple Choice, Sie haben ausgewählt:" + achoices.join ()); // Ausgabeergebnis
}
}
</script>
<form method = "post" name = "myForm1">
Konstellation:
<p>
<select id = "constellation1" name = "constellation1">
<Option Value = "Aries" Selected = "Selected"> Aries </Option>
<option value = "taurus"> taurus </option>
<Option Value = "Gemini"> Gemini </option>
<Option Value = "Cancer"> Cancer </Option>
<Option Value = "Leo"> Lion </Option>
<Option value = "virgo"> jungfräulich </option>
<Option Value = "Libra"> Libra </Option>
<option value = "scorpio"> scorpio </option>
<Option Value = "Sagittarius"> Snorker </Option>
<Option Value = "Capricorn"> Capricorn </Option>
<option value = "aquarius"> aquarius </option>
<Option Value = "Pisces"> Pisces </Option>
</select>
<Eingabe type = "button" onclick = "getSelectValue ('Constellation1')" value = "Optionen anzeigen" />
</p>
<p>
<select id = "constellation2" name = "constellation2" multiple = "multiple" style = "height: 120px;">
<Option Value = "Aries"> Aries </Option>
<option value = "taurus"> taurus </option>
<Option Value = "Gemini"> Gemini </option>
<Option Value = "Cancer"> Cancer </Option>
<Option Value = "Leo"> Lion </Option>
<Option value = "virgo"> jungfräulich </option>
<Option Value = "Libra"> Libra </Option>
<option value = "scorpio"> scorpio </option>
<Option Value = "Sagittarius"> Snorker </Option>
<Option Value = "Capricorn"> Capricorn </Option>
<option value = "aquarius"> aquarius </option>
<Option Value = "Pisces"> Pisces </Option>
</select>
<Eingabe type = "button" onclick = "getSelectValue ('Constellation2')" value = "Optionen anzeigen" />
</p>
</form>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.