Este artículo describe cómo establecer botones de radio, casillas de verificación y menús desplegables usando DOM de JS. Compártelo para su referencia. El método de implementación específico es el siguiente:
1. Establezca botones de radio
El botón de radio está en el formulario <input type = "radio" />. Es un conjunto de objetos para que los usuarios elijan, pero solo uno puede seleccionarse a la vez. Cada uno tiene un atributo marcado, y cuando uno lo selecciona como ture, los otros se vuelven falsos.
Publicemos un ejemplo primero:
Copie el código de la siguiente manera: <script type = "text/javaScript">
función getChoice () {
var oform = document.forms ["uForm1"];
var aChoices = oform.camera;
para (i = 0; i <aChoices.length; i ++) // Transferir toda la tabla de opciones individuales
if (achoices [i] .ecked) // Salir si se encuentra el elemento seleccionado
romper;
alerta ("La marca de la cámara es:" + Achoices [i] .Value);
}
funciones setChoice (inum) {
var oform = document.forms ["uForm1"];
oform.camera [inum] .ecked = true;
}
</script>
<Form Method = "Post" Name = "UForm1" Action = "AddInfo.aspx">
Marca de cámara:
<p>
<input type = "Radio" name = "Camera" id = "Canon" value = "Canon">
<etiqueta for = "canon"> canon </label>
</p>
<p>
<input type = "radio" name = "cámara" id = "nikon" value = "nikon">
<etiqueta for = "nikon"> nikon </selet>
</p>
<p>
<input type = "Radio" name = "Camera" id = "Sony" valor = "Sony" marcado>
<Label para = "Sony"> Sony </elabel>
</p>
<p>
<input type = "Radio" name = "Camera" id = "Olympus" value = "Olympus">
<Label para = "Olympus"> Olympus </label>
</p>
<p>
<input type = "radio" name = "cámara" id = "samsung" value = "samsung">
<etiqueta for = "samsung"> samsung </selet>
</p>
<p>
<input type = "Radio" name = "Camera" id = "Pentax" value = "Pentax">
<etiqueta for = "pentax"> pentax </label>
</p>
<p>
<input type = "radio" name = "cámara" id = "otros" value = "otros">
<etiqueta para = "otros"> otros </label>
</p>
<p>
<input type = "Subt" name = "btnsubmit" id = "btnsubmit" valor = "enviar">
</p>
<p>
<input type = "button" valor = "detectar objeto seleccionado" onClick = "getChoice ();">
<input type = "button" value = "set en canon" onClick = "setChoice (0);">
</p>
</form>
El botón de radio está en el formulario <input type = "radio" />. Es un conjunto de objetos para que los usuarios elijan, pero solo uno puede seleccionarse a la vez. Cada uno tiene un atributo marcado, y cuando uno lo selecciona como ture, los otros se vuelven falsos.
En el código anterior, se puede ver que la identificación y el nombre son diferentes, y sus nombres son los mismos en un conjunto de botones de radio, y solo se selecciona uno. ID está vinculado a <label> u otras opciones.
Entre el código: el código para verificar el objeto seleccionado está (cuando el valor de un cierto elemento es ture, el recorrido termina)
La copia del código es la siguiente: var oform = document.forms ["uForm1"];
var aChoices = oform.camera;
para (i = 0; i <aChoices.length; i ++) // Transferir toda la tabla de opciones individuales
if (achoices [i] .ecked) // Salir si se encuentra el elemento seleccionado
romper;
alerta ("La marca de la cámara es:" + Achoices [i] .Value);
2. Establezca múltiples cuadros de selección
A diferencia de los botones de radio, la casilla de verificación <input type = "Checkbox" /> se puede seleccionar al mismo tiempo para procesarse. La casilla de verificación antes de cada correo electrónico en el buzón es un uso típico.
Copie el código de la siguiente manera: <script type = "text/javaScript">
Function CheckBox () {
var str = document.getElementsByName ("Hobby");
var objarray = str.length;
var chestr = "";
para (j = 0; j <objarray; j ++) {
if (str [j] .ecked == true) {
Chestr + = str [j] .value + ",";
}
}
if (chestr == "") {
alerta ("¡Seleccione un pasatiempo primero ~!");
} demás {
alerta ("Su primera elección:" + Chestr);
}
}
function ChangeBoxes (Action) {
var oform = document.forms ["myForm1"];
var ocheckbox = oform.hobby;
para (var i = 0; i <ocheckbox.length; i ++) // transfiere cada opción
if (acción <0) // selección inversa
ocheckbox [i] .ecked =! Ocheckbox [i] .ecked;
más // Si la acción es 1, seleccione todo, y si es 0, seleccione todo
Ocheckbox [i] .ecked = Action;
}
</script>
<Form Method = "Post" Name = "MyForm1" Action = "AddInfo.aspx">
Cosas que te gusta hacer:
<p>
<input type = "checkbox" name = "hobby" id = "ball" value = "ball">
<etiqueta para = "ball"> jugando baloncesto </etlabe>
</p>
<p>
<input type = "checkbox" name = "hobby" id = "tv" value = "tv">
<Label para = "TV"> Mira TV </etlabe>
</p>
<p>
<input type = "checkbox" name = "hobby" id = "net" value = "net">
<etiqueta for = "net"> en Internet </elabel>
</p>
<p>
<input type = "checkbox" name = "hobby" id = "book" value = "book">
<etiqueta for = "book"> Reading </selet>
</p>
<p>
<input type = "checkbox" name = "Hobby" id = "Trip" value = "Trip">
<etiqueta para = "Trip"> Travel </label>
</p>
<p>
<input type = "checkbox" name = "hobby" id = "music" value = "Music">
<Label para = "Música"> Música </etlabe>
</p>
<p>
<input type = "checkbox" name = "hobby" id = "otros" value = "otros">
<etiqueta para = "otros"> otros </label>
</p>
<p>
<input type = "Button" value = "Seleccione All" OnClick = "ChangeBoxes (1);" />
<input type = "button" value = "sin selección en absoluto" onClick = "ChangeBoxes (0);" />
<input type = "button" value = "anti-select" onClick = "ChangeBoxes (-1);" />
<input type = "button" value = "subt" onClick = "checkBox ()" />
</p>
</form>
El principio de casilla de verificación se determina utilizando el valor booleano de atributo verificado. Seleccione todo y la selección incompleta puede pasar parámetros en forma de 0 y 1.
3. Menú desplegable
El menú desplegable <Select> es un elemento de formulario comúnmente utilizado. Cuando su despliegue es seleccionable por radio, la función del botón de radio <input type = "radio" /> es la misma que la función del botón de radio <input type = "radio" />. Cuando el menú desplegable es múltiple seleccionable, la función es equivalente a la casilla de verificación, pero el área ocupada es mucho más pequeña que la casilla de verificación.
Propiedades comunes de los menús desplegables:
| propiedad | ilustrar |
| longitud | Indica el número de opciones <Opción> |
| seleccionado | Valor booleano que indica si <opción> está seleccionado |
| SelectedIndex | El número de serie de la opción seleccionada es -1 si no se selecciona ninguna opción. Para el menú desplegable multiselecto, regrese al primer seleccionado El número de secuencia comienza desde 0 |
| texto | Texto de opciones |
| valor | Valor de la opción |
| tipo | El tipo de menú desplegable, la opción única devuelve select-one, optación múltiple devuelve select-multiple |
| opción | Obtenga una variedad de opciones, por ejemplo: Oselectbox.options [2], que indica el tercer elemento de Oselectbox en el menú desplegable |
①. Menú desplegable para obtener el valor de selección única
Copie el código de la siguiente manera: <script language = "javaScript">
function checkSingle () {
var oform = document.forms ["myForm1"];
var oselectbox = oform.constellation;
var ichoice = oselectbox.selectedIndex; // Obtener elemento seleccionado
alerta ("Usted seleccionado" + oselectbox.options [ichoice] .Text);
}
</script>
<Form Method = "Post" name = "myForm1">
<Label para = "Constellation"> Signo de zodiaco: </etiqueta>
<p>
<select id = "constellation" name = "Constellation">
<opción value = "aries" selected = "selected"> aries </opción>
<opción valor = "taurus"> taurus </ppection>
<opción valor = "gemini"> gemini </ppection>
<opción valor = "cáncer"> cáncer </ppection>
<opción valor = "leo"> lion </ppection>
<opción valor = "virgo"> virgo </ppection>
<opción valor = "libra"> libra </opción>
<opción valor = "escorpio"> scorpio </ppection>
<opción valor = "sagitario"> snorker </opción>
<opción valor = "Capricornio"> Capricornio </ppection>
<opción valor = "acuario"> Acuario </opción>
<opción valor = "piscis"> piscis </ppection>
</select>
</p>
<input type = "button" onClick = "checkSingle ()" value = "Ver opciones" />
</form>
②. Cuando el menú desplegable sea multiselecto, tome el valor
Copie el código de la siguiente manera: <script type = "text/javaScript">
función checkMultiple () {
var oform = document.forms ["myForm1"];
var oselectbox = oform.constellation;
var aChoices = new Array ();
// viajar todo el menú desplegable
para (var i = 0; i <oselectbox.options.length; i ++)
if (oselectbox.options [i] .selected) // si se selecciona
Achoices.push (oselectbox.options [i] .Text); // presione en la matriz
alerta ("Usted seleccionó:" + Achoices.JoIn ()); // resultado de salida
}
</script>
<Form Method = "Post" name = "myForm1">
<Label para = "Constellation"> Signo de zodiaco: </etiqueta>
<p>
<select id = "constelation" name = "constellation" múltiple = "múltiple" estilo = "altura: 180px;">
<opción valor = "aries"> aries </ppection>
<opción valor = "taurus"> taurus </ppection>
<opción valor = "gemini"> gemini </ppection>
<opción valor = "cáncer"> cáncer </ppection>
<opción valor = "leo"> lion </ppection>
<opción valor = "virgo"> virgo </ppection>
<opción valor = "libra"> libra </opción>
<opción valor = "escorpio"> scorpio </ppection>
<opción valor = "sagitario"> snorker </opción>
<opción valor = "Capricornio"> Capricornio </ppection>
<opción valor = "acuario"> Acuario </opción>
<opción valor = "piscis"> piscis </ppection>
</select>
</p>
<input type = "button" onClick = "checkMultiple ()" value = "Ver opciones" />
</form>
③. Valor general (algo que retire las opciones individuales y múltiples)
Copie el código de la siguiente manera: <script language = "javaScript">
función getSelectValue (box) {
var oform = document.forms ["myForm1"];
var oselectbox = oform.elements [box]; // El menú desplegable de selección correspondiente se selecciona de acuerdo con los parámetros
if (oselectbox.type == "select-one") {// juzga si es una opción única o múltiple
var ichoice = oselectbox.selectedIndex; // Obtener elemento seleccionado
alerta ("Selecto, seleccionado" + Oselectbox.options [ichoice] .Text);
} demás {
var aChoices = new Array ();
// viajar todo el menú desplegable
para (var i = 0; i <oselectbox.options.length; i ++)
if (oselectbox.options [i] .selected) // si se selecciona
Achoices.push (oselectbox.options [i] .Text); // presione en la matriz
alerta ("Opción múltiple, seleccionó:" + Achoices.Join ()); // resultado de salida
}
}
</script>
<Form Method = "Post" name = "myForm1">
constelación:
<p>
<select id = "constellation1" name = "constellation1">
<opción value = "aries" selected = "selected"> aries </opción>
<opción valor = "taurus"> taurus </ppection>
<opción valor = "gemini"> gemini </ppection>
<opción valor = "cáncer"> cáncer </ppection>
<opción valor = "leo"> lion </ppection>
<opción valor = "virgo"> virgo </ppection>
<opción valor = "libra"> libra </opción>
<opción valor = "escorpio"> scorpio </ppection>
<opción valor = "sagitario"> snorker </opción>
<opción valor = "Capricornio"> Capricornio </ppection>
<opción valor = "acuario"> Acuario </opción>
<opción valor = "piscis"> piscis </ppection>
</select>
<input type = "button" onClick = "getSelectValue ('Constellation1')" Value = "Ver opciones" />
</p>
<p>
<select id = "constelation2" name = "constellation2" múltiple = "múltiple" estilo = "altura: 120px;">
<opción valor = "aries"> aries </ppection>
<opción valor = "taurus"> taurus </ppection>
<opción valor = "gemini"> gemini </ppection>
<opción valor = "cáncer"> cáncer </ppection>
<opción valor = "leo"> lion </ppection>
<opción valor = "virgo"> virgo </ppection>
<opción valor = "libra"> libra </opción>
<opción valor = "escorpio"> scorpio </ppection>
<opción valor = "sagitario"> snorker </opción>
<opción valor = "Capricornio"> Capricornio </ppection>
<opción valor = "acuario"> Acuario </opción>
<opción valor = "piscis"> piscis </ppection>
</select>
<input type = "button" onClick = "getSelectValue ('Constellation2')" Value = "Ver opciones" />
</p>
</form>
Espero que este artículo sea útil para la programación de JavaScript de todos.