JS Como definir botões de rádio, caixas de seleção e menus suspensos usando DOM

Este artigo descreve como definir botões de rádio, caixas de seleção e menus suspensos usando DOM por JS. Compartilhe para sua referência. O método de implementação específico é o seguinte:

1. Defina os botões de rádio

O botão de rádio está no formulário <input type = "Radio" />. É um conjunto de objetos para os usuários escolherem, mas apenas um pode ser selecionado por vez. Cada um tem um atributo verificado e, quando um seleciona como Ture, os outros se tornam falsos.

Vamos postar um exemplo primeiro:

Copie o código da seguinte forma: <script type = "text/javascript">

função getChoice () {

var oform = document.forms ["uform1"];

var acicoices = oform.camera;

for (i = 0; i <achoices.length; i ++) // transfira toda a tabela de opções únicas

if (acasoices [i] .ckecked) // saia se o item selecionado for encontrado

quebrar;

alerta ("a marca da câmera é:" + achóices [i] .Value);

}

função setchoice (inum) {

var oform = document.forms ["uform1"];

OFORM.camera [inum] .Checked = true;

}

</script>

<form método = "post" name = "uform1" action = "addinfo.aspx">

Marca de câmera:

<p>

<input type = "radio" name = "camera" id = "canon" value = "canon">>

<Label para = "Canon"> Canon </abely>

</p>

<p>

<input type = "radio" name = "camera" id = "nikon" value = "nikon">

<Label para = "Nikon"> Nikon </belt>

</p>

<p>

<input type = "radio" name = "camera" id = "sony" value = "sony" verificado>

<Label para = "Sony"> Sony </abely>

</p>

<p>

<input type = "radio" name = "camera" id = "olympus" value = "olympus">

<Label para = "Olympus"> Olympus </elabel>

</p>

<p>

<input type = "radio" name = "camera" id = "samsung" value = "samsung">

<Label para = "Samsung"> Samsung </elabel>

</p>

<p>

<input type = "radio" name = "camera" id = "pentax" value = "pentax">

<Label para = "Pentax"> Pentax </elabel>

</p>

<p>

<input type = "radio" name = "camera" id = "outros" value = "outros">>

<Label para = "outros"> outros </belt>

</p>

<p>

<input type = "submit" name = "btnsubMit" id = "btnsubMit" value = "submit">

</p>

<p>

<input type = "button" value = "detectar objeto selecionado" onclick = "getChoice ();">

<input type = "button" value = "definido como canon" onclick = "setchoice (0);">

</p>

</morm>

O botão de rádio está no formulário <input type = "Radio" />. É um conjunto de objetos para os usuários escolherem, mas apenas um pode ser selecionado por vez. Cada um tem um atributo verificado e, quando um seleciona como Ture, os outros se tornam falsos.

A partir do código acima, pode -se ver que o ID e o nome são diferentes, e seus nomes são os mesmos em um conjunto de botões de rádio, e apenas um é selecionado. O ID está vinculado a <Boel> ou outras opções.

Entre o código: o código para verificar o objeto selecionado está (quando o valor chcked de um determinado item é ture, as extremidades de travessia)

A cópia do código é a seguinte: var oform = document.forms ["uform1"];

var acicoices = oform.camera;

for (i = 0; i <achoices.length; i ++) // transfira toda a tabela de opções únicas

if (acasoices [i] .ckecked) // saia se o item selecionado for encontrado

quebrar;

alerta ("a marca da câmera é:" + achóices [i] .Value);

2. Defina várias caixas de seleção

Ao contrário dos botões de rádio, a caixa de seleção <type de entrada = "Caixa de seleção" /> pode ser selecionada ao mesmo tempo para processamento. A caixa de seleção antes de cada email na caixa de correio é um uso típico.

Copie o código da seguinte forma: <script type = "text/javascript">

Função de seleção () {

var str = document.getElementsByName ("hobby");

var objarray = str.Length;

var chest = "";

for (j = 0; j <objarray; j ++) {

if (str [j] .Checked == true) {

chest + = str [j] .Value + ",";

}

}

if (chest == "") {

alerta ("Por favor, selecione um hobby primeiro ~!");

} outro {

alerta ("sua primeira escolha:" + chest);

}

}

Função ChangeBoxes (Action) {

var oform = document.forms ["myform1"];

var occheckBox = oform.hobby;

for (var i = 0; i <occheckbox.length; i ++) // transfira cada opção

if (ação <0) // seleção reversa

occheckbox [i] .CHecked =! OcheckBox [i] .Checked;

else // se a ação for 1, selecione tudo e, se for 0, selecione todos

occheckbox [i] .CHecked = Action;

}

</script>

<form método = "post" name = "myForm1" action = "addinfo.aspx">

Coisas que você gosta de fazer:

<p>

<input type = "caixa de seleção" name = "hobby" id = "ball" value = "ball">

<Label para = "Ball"> jogando basquete </abel>

</p>

<p>

<input type = "caixa de seleção" name = "hobby" id = "tv" value = "tv">

<Label para = "TV"> Assista TV </abelt>

</p>

<p>

<input type = "caixa de seleção" name = "hobby" id = "net" value = "net">

<Label para = "net"> na Internet </babel>

</p>

<p>

<input type = "caixa de seleção" name = "hobby" id = "book" value = "book">>

<Label para = "Book"> Reading </elabel>

</p>

<p>

<input type = "caixa de seleção" name = "hobby" id = "Trip" value = "Trip">

<Label para = "Trip"> Travel </belt>

</p>

<p>

<input type = "caixa de seleção" name = "hobby" id = "music" value = "music">

<Label for = "Music"> Music </elabel>

</p>

<p>

<entrada de entrada = "caixa de seleção" name = "hobby" id = "outros" value = "outros">>

<Label para = "outros"> outros </belt>

</p>

<p>

<input type = "botão" value = "selecione todos" onclick = "changeboxes (1);" />

<input type = "Button" value = "Nenhuma seleção" OnClick = "ChangeBoxes (0);" />

<input type = "button" value = "anti-selecion" onclick = "changeboxes (-1);" />

<input type = "button" value = "submeter" onclick = "Checkbox ()" />

</p>

</morm>

O princípio da caixa de seleção é determinado usando o valor booleano do atributo verificado. Selecione tudo e a seleção incompleta pode passar os parâmetros na forma de 0 e 1.

3. Menu de puxar

O menu suspenso <Seclect> é um elemento de formulário comumente usado. Quando o pull-down é selecionado por rádio, a função do botão de rádio <input type = "Radio" /> é a mesma que a função do botão de rádio <input type = "Radio" />. Quando o menu suspenso é múltiplo selecionável, a função é equivalente à caixa de seleção, mas a área ocupada é muito menor que a caixa de seleção.

Propriedades comuns de menus suspensos:

①. Puxe o menu para baixo para obter o valor de seleção única

Copie o código da seguinte forma: <Script Language = "JavaScript">

função checksingle () {

var oform = document.forms ["myform1"];

var aselectBox = OFORM.CONTLATLATION;

var iChoice = OselectBox.SelectedIndex; // recebe item selecionado

alerta ("você selecionou" + OselectBox.Options [ichoice] .text);

}

</script>

<form método = "post" name = "myform1">

<Label for = "Constellation"> Zodiac Sign: </elabel>

<p>

<select id = "constelação" name = "constelação">

<option value = "Aries" selecionado = "Selected"> Aries </pption>

<opção value = "Taurus"> Taurus </pption>

<opção value = "gemini"> gemini </pption>

<opção value = "câncer"> câncer </pption>

<opção value = "leo"> leão </pption>

<opção value = "virgo"> virgem </pption>

<opção value = "Libra"> Libra </pption>

<opção value = "escorpião"> escorpião </pption>

<opção value = "sagittarius"> snorker </pption>

<opção value = "Capricórnio"> Capricórnio </pption>

<opção value = "aquarius"> aquarius </pption>

<opção value = "pisces"> pisces </pption>

</leclect>

</p>

<input type = "button" onclick = "checksingle ()" value = "exibir opções" />

</morm>

②. Quando o menu suspenso for multi-seleção, pegue o valor

Copie o código da seguinte forma: <script type = "text/javascript">

função checkMultiPle () {

var oform = document.forms ["myform1"];

var aselectBox = OFORM.CONTLATLATION;

var acicoices = new Array ();

// Viaje todo o menu suspenso

for (var i = 0; i <oselectbox.options.length; i ++)

if (aselectbox.options [i] .Selected) // se selecionado

ACHOICES.PUSH (OSELECTBOX.Options [i] .Text); // Pressione na matriz

alerta ("você selecionou:" + achoices.join ()); // resultado de saída

}

</script>

<form método = "post" name = "myform1">

<Label for = "Constellation"> Zodiac Sign: </elabel>

<p>

<select id = "constelação" name = "constelação" múltipla = "múltiplo" style = "altura: 180px;">

<opção value = "Aries"> aries </pption>

<opção value = "Taurus"> Taurus </pption>

<opção value = "gemini"> gemini </pption>

<opção value = "câncer"> câncer </pption>

<opção value = "leo"> leão </pption>

<opção value = "virgo"> virgem </pption>

<opção value = "Libra"> Libra </pption>

<opção value = "escorpião"> escorpião </pption>

<opção value = "sagittarius"> snorker </pption>

<opção value = "Capricórnio"> Capricórnio </pption>

<opção value = "aquarius"> aquarius </pption>

<opção value = "pisces"> pisces </pption>

</leclect>

</p>

<input type = "button" onclick = "checkMultIPLE ()" value = "View Options" />

</morm>

③. Valor geral (algo que puxa opções únicas e múltiplas)

Copie o código da seguinte forma: <Script Language = "JavaScript">

função getSelectValue (caixa) {

var oform = document.forms ["myform1"];

var aselectBox = OFORM.ELEMENTS [Caixa]; // O menu suspenso de seleção correspondente é selecionado de acordo com os parâmetros

if (aselectbox.type == "select-one") {// julgar se é uma opção única ou múltipla

var iChoice = OselectBox.SelectedIndex; // recebe item selecionado

alerta ("Single-Select, você selecionou" + OselectBox.Options [ichoice] .Text);

} outro {

var acicoices = new Array ();

// Viaje todo o menu suspenso

for (var i = 0; i <oselectbox.options.length; i ++)

if (aselectbox.options [i] .Selected) // se selecionado

ACHOICES.PUSH (OSELECTBOX.Options [i] .Text); // Pressione na matriz

alerta ("Escolha múltipla, você selecionou:" + achoices.join ()); // resultado de saída

}

}

</script>

<form método = "post" name = "myform1">

constelação:

<p>

<select id = "constellation1" name = "constellation1">

<option value = "Aries" selecionado = "Selected"> Aries </pption>

<opção value = "Taurus"> Taurus </pption>

<opção value = "gemini"> gemini </pption>

<opção value = "câncer"> câncer </pption>

<opção value = "leo"> leão </pption>

<opção value = "virgo"> virgem </pption>

<opção value = "Libra"> Libra </pption>

<opção value = "escorpião"> escorpião </pption>

<opção value = "sagittarius"> snorker </pption>

<opção value = "Capricórnio"> Capricórnio </pption>

<opção value = "aquarius"> aquarius </pption>

<opção value = "pisces"> pisces </pption>

</leclect>

<input type = "button" onclick = "getSelectValue ('constellation1')" value = "visualizar opções" />

</p>

<p>

<select id = "constellation2" name = "constellation2" múltipla = "múltiplo" style = "altura: 120px;">

<opção value = "Aries"> aries </pption>

<opção value = "Taurus"> Taurus </pption>

<opção value = "gemini"> gemini </pption>

<opção value = "câncer"> câncer </pption>

<opção value = "leo"> leão </pption>

<opção value = "virgo"> virgem </pption>

<opção value = "Libra"> Libra </pption>

<opção value = "escorpião"> escorpião </pption>

<opção value = "sagittarius"> snorker </pption>

<opção value = "Capricórnio"> Capricórnio </pption>

<opção value = "aquarius"> aquarius </pption>

<opção value = "pisces"> pisces </pption>

</leclect>

<input type = "button" onclick = "getSelectValue ('constellation2')" value = "exibir opções" />

</p>

</morm>

Espero que este artigo seja útil para a programação JavaScript de todos.