En el artículo anterior, le presenté el conocimiento relevante sobre la explicación de ejemplo del formulario de operación JS (Parte 2). Este artículo le presentará la explicación de ejemplo del formulario de operación JavaScript (Parte 2). Los detalles específicos son los siguientes:
1. Campo de texto
<input type = "text" />
----------------------------------------------------------------------------------------------------------------------------
Operar el valor del campo de texto
Value Propiedad establecida o obtener valor
----------------------------------------------------------------------------------------------------------------------------
2. Botones de radio y multiselecto
<input type = "radio" /> <input type = "Checkbox" />
----------------------------------------------------------------------------------------------------------------------------
devolución verificada o establecer el estado seleccionado de la opción única
Verdadero seleccionado falso no seleccionado
El atributo de valor obtiene el valor seleccionado y primero debe determinar el estado seleccionado.
----------------------------------------------------------------------------------------------------------------------------
Ejemplo: seleccione todo/no seleccionar todo/revertir
1.png
1. Estructura deldom
<body><form name="myform" action="#" method="post" id="form1"><script type="text/javascript">for(var i=0;i<20;i++){document.write("<input type='checkbox' name='nums' />"+(i+1)+"<br>" )}document.write("<input type='radio' name='radios'>select all "); document.Write (" <input type = 'Radio' name = 'Radios'> seleccione All "); document.Write (" <input type = 'Radio' name = 'Radios'> seleccione All "); Document.Write (" <input type = 'Radio' name = 'Radios'> seleccione All "); Document.Write (" <input type = 'Radio =' Radio = 'Radio'>;2. Script Script
2.1 Uso del método de las funciones de llamadas
<script type = "text/javaScript"> window.onload = function () {var nums = document.getElementsByName ("nums"); var radios = document.getElementsByName ("radios"); diversión (nums, i, radios); function diversur (a, b, c) {c [b] .onclick = function () {if (b == 0) i = 0; i <a.length; i ++) {a [i] .checked = true;}} else if (b == 1) {para (var i = 0; i <a.length; i ++) {a [i] .checked = false;}} else si (b == 2) {para (var (var (var (var (var (var (var (var (var (var (var (var i = 0; i <a.length; i ++) {if (a [i] .ecked) {a [i] .ecked = false;} else {a [i] .ecked = true;}}}}} </script>2.2 Uso del método para crear funciones anónimas en un cierre
<script type = "text/javaScript"> window.onload = function () {var nums = document.getElementsByName ("nums"); var radios = document.getElementsByName ("Radios"); for (var i = 0; i <radios.length; i ++) {(function (a) {Radios [a] .onclick i = 0; i <nums.length; i ++) {nums [i] .ecked = true;}} else if (a == 1) {for (var i = 0; i <nums.length; i ++) {nums [i] .ecked = false;}} else if (a == 2) {var (var (var (var (var (var i = 0; i <nums.length; i ++) {if (nums [i] .ecked) {nums [i] .ecked = false;} else {nums [i] .ecked = true;}}}}}) (i);}} </script>3. Tire de la caja
<form de nombre = "myForm"> <select name = "sels"> <option> University de Peking </opción> <opción> Universidad Chang'an </opción> <pection> Nanjing University </opción> </select> </form>
----------------------------------------------------------------------------------------------------------------------------
Set o regreso seleccionado al estado seleccionado del cuadro desplegable
Verdadero seleccionado falso no seleccionado
SelectedIndex establece o devuelve el número de índice seleccionado en el cuadro desplegable
----------------------------------------------------------------------------------------------------------------------------
Ejemplo1: Seleccione la Universidad Chang'an
<script> var sels = document.myform.sels; // var sels = document.myform.sels.options; // (también es posible) sels [1] .selected = true; </script>
o
<script> var sels = document.myform.sels; // var sels = document.myform.sels.options; // (también es posible) sels.selectedIndex = 1; </script>
Ejemplo2: Precio unitario * Cantidad = Precio total
1.png
1. Estructura deldom
<body> <form de nombre = "myForm" action = "#" método = "post" id = "form1"> precio unitario: <input type = "text" name = "precio" value = "200"> <select name = "Count"> Cantidad <opción> 1 </ppection> <opción> 2 </opción> <pection> 3 <//select> SELECCIONE> Price de input: <input type = "Text" Nombre = "Total" Valor "Total" Value "Total" 200 ""
2. Script Script
<script type = "text/javascript"> window.onload = function () {var precio = document.myform.price; var count = document.myform.count; var total = document.myform.total; count.onchange = function () {total.value = parseint (precio.value)*(count.selectedindex+1); }} </script>4. Área de texto
<Textarea name = "Info" Rows = "7" cols = "60"> </extarea>
---------------------------------------------------------------------------------------------------
Value devuelve o establece el valor del área de texto
---------------------------------------------------------------------------------------------------
Ejemplo: detecte dinámicamente la longitud de los caracteres ingresados en el área de texto
1.png
1. Estructura deldom:
<Body> <Div ID = "Content"> Se puede ingresar un total de 20 caracteres, se ha ingresado 0 y se puede ingresar 20 </div> <form de formato = "myform" action = "#" método = "post" id = "form1"> <textarea name = "info" cols = "60" ROWS = "7"> </exteArea> </form> </body>
2. Script Script:
<script type = "text/javaScript"> window.onload = function () {var content = document.getElementById ("content"); var info = document.myform.info; info.onkeyup = info.onkeydown = function () {var str = info.value; var longitud = check (str); var strs = 20; if (longitud <= strs) {intent.innerhtml Los caracteres "+Strs+" se han ingresado, y también se pueden ingresar "+Longitud+", y "+(Strs-Length)+" S "también se puede ingresar;} else {info.value = str.substring (0, Strs);}} // Detección de funciones chinas e inglesas (str) {var num = 0; para (var (var (var (var (var (var (var (Var i = 0; i <str.length; i ++) {if (str.charcodeat (i)> = 0 && str.charcodeat (i) <= 255) {// inglés num ++;} else {// chino num+= 2;}} return num;}} </script>5. Verificación de forma
Evento de ONSUBMIT disparado cuando se envía el formulario
----------------------------------------------------------------------------------------------------------------------------
<form de nombre = "myform" action = "www.baidu.com" método = "post" onsubmit = "return check (this)"> </orm> devuelve falso; // Bloquear el comportamiento predeterminado del formulario
----------------------------------------------------------------------------------------------------------------------------
6. Método de envío
Este método se utiliza para implementar la presentación automática
El evento OnSubmit solo se puede usar para enviar manualmente
Lo anterior es una explicación de ejemplo del formulario de operación JavaScript introducido por el editor (Parte 2). Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!