No artigo anterior, apresentei o conhecimento relevante sobre a explicação do formulário de operação JS (parte 2). Este artigo apresentará a você a explicação do formulário de operação JavaScript (parte 2). Os detalhes específicos são os seguintes:
1. Campo de texto
<input type = "text" />
--------------------------------------------------------------------------------------------------------------------------------------------------
Operar o valor do campo de texto
Value Property Set ou Get Value
--------------------------------------------------------------------------------------------------------------------------------------------------
2. Botões de rádio e múltiplas seletores
<input type = "Radio" /> <input type = "Caixa de seleção" />
--------------------------------------------------------------------------------------------------------------------------------------------------
Retorno verificado ou definir o status selecionado da escolha única
Verdadeiro Selecionado Falso não selecionado
O atributo de valor obtém o valor selecionado e deve primeiro determinar o estado selecionado.
--------------------------------------------------------------------------------------------------------------------------------------------------
Exemplo: selecione tudo/não selecione tudo/reverso
1.png
1.dom estrutura
<Body> <formulário name = "myform" action = "#" method = "post" id = "form1"> <script type = "text /javascript"> para (var i = 0; i <20; i ++) {document.write ("<brate type = 'check' name = 'nums' />"+(i+1)+"<br>" nome = 'radios'> selecione tudo "); document.write (" <input type = 'radio' name = 'radios'> selecione All "); document.write (" <input type = 'radio' name = '' radios '> selecione All "); document.write (" <input type =' radio '=' radios '> select All "); Nome = 'Radios'> Anti-Select "); </script> </maf> </body>2.Script Script
2.1 Usando o método de chamada funções
<script type = "text/javascript"> window.onload = function () {var nums = document.getElementsByName ("nums"); var radios = document.getElementsByName ("radios"); fun (nums, i, radios); fun fun (a, c) {c [b] .onclick = function () (b) {b) (b) (b) (nums, i, radios); fun (a, b) {c [b] .onclick = function (); 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;}} se (b == 2) {para (var) i = 0; i <A.Length; i ++) {if (a [i] .Checked) {a [i] .Checked = false;} else {a [i] .checked = true;}}}}} </sCript>2.2 Usando o método de criar funções anônimas em um fechamento
<script type = "text/javascript"> window.onload = function () {var nums = document.getElementsByName ("nums"); var radios = document.getElementsByName ("radios"); para (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) {for (var i = 0; i <nums.Length; i ++) {nums [i] .Checked = false;}} se (a == 2) {para (var i = 0; i <nums.Length; i ++) {if (nums [i] .Checked) {nums [i] .Checked = false;} else {nums [i] .checked = true;}}}}}}) (i);}} </script>3. Caixa para baixo
<nome name = "myform"> <select name = "sels"> <pution> Universidade de Peking </pption> <pution> chang'an universidade </pption> <pution> Universidade de Nanjing </pption> </leclect> </morm>
--------------------------------------------------------------------------------------------------------------------------------------------------
conjunto selecionado ou retorno ao estado selecionado da caixa suspensa
Verdadeiro Selecionado Falso não selecionado
SelectedIndex Definir ou retornar o número do índice selecionado na caixa suspensa
--------------------------------------------------------------------------------------------------------------------------------------------------
Exemplo1: Selecione Chang'an University
<Cript> var sels = document.myform.sels; // var sels = document.myform.sels.options; // (também é possível) sels [1] .Selected = true; </script>
ou
<Cript> var sels = document.myform.sels; // var sels = document.myform.sels.options; // (também é possível) sels.lectectedindex = 1; </script>
Exemplo2: Preço unitário * Quantidade = Preço Total
1.png
1.dom estrutura
<Body> <Form Name = "MyForm" Action = "#" Method = "post" id = "form1"> Preço unitário: <input type = "text" name = "preço" value = "200"> <select name = "count"> quantidade </option> 1 </option> </option> 2 </option> 3 </option> </select> total: </input> </option> </option> 2 </option> 3 </option> </select> total: <input>
2.Script Script
<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 = parseInt (price.Value)*(contagem.SelectexEx = 1; }} </script>4. Área de texto
<texttarea name = "info" linhas = "7" cols = "60"> </sexttarea>
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
o valor retorna ou define o valor da área de texto
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Exemplo: detecte dinamicamente o comprimento dos caracteres inseridos na área de texto
1.png
1.dom estrutura:
<Body> <div id = "content"> Um total de 20 caracteres pode ser inserido, 0 foi inserido e 20 podem ser inseridos </div> <name = "myform" action = "#" method = "post" id = "form1"> <textarea name = "info" cols = "60" robes = "7"> </textarea> </form
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 = info.value; var = check (strs); Os caracteres "+strs+" foram inseridos e "+comprimento+" também pode ser inserido e "+(comprimento de strs)+" s "também pode ser inserido;} else {info.value = str.substring (0, strs);}} // detecção chinesa e a verificação de função em inglês (str) {var num = 0; para (var) i = 0; i <str.Length; i ++) {if (str.charcodeat (i)> = 0 && str.charcodeat (i) <= 255) {// inglesa num ++;} else {// NUM chinês+= 2;}} retornar num;} </script>5. Verificação do formulário
Evento OnSubmit demitido quando o formulário é enviado
--------------------------------------------------------------------------------------------------------------------------------------------------
<Form Name = "MyForm" Action = "www.baidu.com" Method = "Post" OnsubMit = "Return Check (this)"> </morm> retorna false; // bloqueia o comportamento padrão do formulário
--------------------------------------------------------------------------------------------------------------------------------------------------
6. Método de envio
Este método é usado para implementar o envio automático
Evento OnSubmit só pode ser usado para enviar manualmente
O exposto acima é um exemplo de explicação do formulário de operação JavaScript introduzido pelo editor (Parte 2). Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!