Dans l'article précédent, je vous ai présenté les connaissances pertinentes sur l'exemple d'explication du formulaire d'opération JS (partie 2). Cet article vous présentera l'exemple d'explication du formulaire d'opération JavaScript (partie 2). Les détails spécifiques sont les suivants:
1. Champ de texte
<input type = "text" />
--------------------------------------------------------------------------------------------------------------------------------
Faites fonctionner la valeur du champ de texte
valeur de valeur définie ou obtenez la valeur
--------------------------------------------------------------------------------------------------------------------------------
2. Boutons radio et multi-sélection
<input type = "radio" /> <input type = "checkbox" />
--------------------------------------------------------------------------------------------------------------------------------
vérifié renvoyer ou définir l'état sélectionné du choix unique
vrai sélectionné faux non sélectionné
L'attribut de valeur obtient la valeur sélectionnée et doit d'abord déterminer l'état sélectionné.
--------------------------------------------------------------------------------------------------------------------------------
Exemple: sélectionnez tout / ne sélectionnez pas tout / revers
1.png
1. Structure des doms
<body> <form name = "myform" action = "#" méthode = "post" id = "form1"> <script type = "text / javascript"> for (var i = 0; i <20; i ++) {document.write ("<entrée type = 'checkbox' name = 'nums' />" + (i + 1) + "<br>")} document.write ("<fort type = 'name =' <br>")} document.write ("<fort type = 'name =' <br>")} document.write ("<fort type = 'name =' all "); document.write (" <input type = 'radio' name = 'radios'> select all "); document.write (" <input type = 'radio' name = 'radios'> select all "); document.write (" <input type = 'radio =' radios '> select all "); document.write (" <put type =' radio '') name = 'radios'> anti-sélection "); </cript> </ form> </odyfing>2. Script Script
2.1 Utilisation de la méthode d'appel des fonctions
<script type="text/javascript">window.onload=function(){var nums=document.getElementsByName("nums");var radios=document.getElementsByName("radios");fun(nums,i,radios);function fun(a,b,c){c[b].onclick=function(){if(b==0){for(var i = 0; i <a.length; i ++) {a [i] .checked = true;}} else if (b == 1) {for (var i = 0; i <a.Length; i ++) {a [i] .checked = false;}} else if (b == 2) {for (var; i = 0; i <a.Length; i ++) {if (a [i] .checked) {a [i] .checked = false;} else {a [i] .checked = true;}}}}} </ script>2.2 Utilisation de la méthode de création de fonctions anonymes dans une fermeture
<script type = "text / javascript"> window.onload = function () {var nums = document.getElementsByName ("nums"); var radios = document.getElementsByName ("radios"); for (var i = 0; i <adios.length; i ++) {(function (a) i = 0; i <nums.length; i ++) {nums [i] .checked = true;}} else if (a == 1) {for (var i = 0; i <nums.length; i ++) {nums [i] .checked = false;}} else if (a == 2) {for (var) i = 0; i <nums.length; i ++) {if (nums [i] .checked) {nums [i] .checked = false;} else {nums [i] .checked = true;}}}}}) (i);}} </script>3. Tirez la boîte
<form name = "myform"> <select name = "Sels"> <opopoption> Université de Pékin </opoption> <opopoption> Université Chang'an </opoption> <opopopoption> Université Nanjing </opoption> </lect> </ form>
--------------------------------------------------------------------------------------------------------------------------------
Définir ou retourner à l'état sélectionné de la boîte déroulante
vrai sélectionné faux non sélectionné
SelectedIndex définit ou renvoie le numéro d'index sélectionné dans la zone déroulante
--------------------------------------------------------------------------------------------------------------------------------
Exemple1: Sélectionnez l'Université Chang'an
<script> var sels = document.myform.sels; // var sels = document.myform.sels.options; // (c'est aussi possible) sels [1] .selected = true; </script>
ou
<Script> var sels = document.myform.sels; // var sels = document.myform.sels.options; // (il est également possible) sels.selectedindex = 1; </cript>
Exemple2: Prix unitaire * Quantité = prix total
1.png
1. Structure des doms
<body> <form name = "myform" action = "#" méthode = "post" id = "form1"> prix unitaire: <entrée type = "text" name = "price" value = "200"> <select name = "count"> Quantity <poption> 1 </ option> <poption> 2 </ option> </ option> 3 </ option> </lect> Prix: <puty type = "text" name = "Total" Value = "200"> </ Form> <puty type = "text" name = "Total" Value = "200"> </ Form> <puty type = "Text" Name = "Total" Value = "200"> </ Form> <fort type = "Text" Name = "Total" Value = "200"> </ Form> <fort Type = "Text" Name = "Total" Value = "200"> </ Form> <puty Type = "TEXT"
2. Script Script
<script type = "text / javascript"> window.onLoad = function () {var prix = document.myform.price; var count = document.myform.Count; var total = document.myform.total; count.onChange = function () {total.value = parseInt (prix.Value) * (count.selectedEx + 1); }} </ script>4. Zone de texte
<textarea name = "info" rows = "7" cols = "60"> </ textarea>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
la valeur renvoie ou définit la valeur de la zone de texte
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Exemple: détecter dynamiquement la longueur des caractères entrés dans la zone de texte
1.png
1. Structure des doms:
<body> <div id = "Content"> Un total de 20 caractères peuvent être entrés, 0 a été entré et 20 peut être entré </v> <form name = "myform" action = "#" "Method =" Post "id =" form1 "> <textarea name =" info "cols =" 60 "Rows =" 7 "> </Textare> </form> </odody>
2. Script Script:
<script type = "text / javascript"> window.onLoad = function () {var contenu = document.getElementById ("contenu"); var info = document.myform.info; info.onkeyup = info.onkeydown = function () {var str = info.value; var longueur = chèque (str); var strS = 20; if (luny <= strs) {contenu.innerh. "+ STRS +" Les caractères ont été entrés, et "+ longueur +" peut également être entré, et "+ (strs-longueng i = 0; i <str.length; i ++) {if (str.charcodeat (i)> = 0 && str.charcodeat (i) <= 255) {// anglais num ++;} else {// chinois num + = 2;}} return num;}} </script>5. Vérification du formulaire
L'événement OnSubmit a été licencié lorsque le formulaire est soumis
--------------------------------------------------------------------------------------------------------------------------------
<form name = "myform" action = "www.baidu.com" méthode = "post" onSubmit = "return check (this)"> </ form> return false; // bloque le comportement par défaut du formulaire
--------------------------------------------------------------------------------------------------------------------------------
6. Soumettre la méthode
Cette méthode est utilisée pour implémenter une soumission automatique
L'événement OnSubmit ne peut être utilisé que pour soumettre manuellement
Ce qui précède est un exemple d'explication du formulaire d'opération JavaScript introduit par l'éditeur (partie 2). J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!