JS Comment définir des boutons radio, des cases à cocher et des menus déroulants à l'aide de DOM

Cet article décrit comment définir des boutons radio, des cases à cocher et des menus déroulants à l'aide de DOM par JS. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:

1. Définir les boutons radio

Le bouton radio est dans le formulaire <entrée type = "radio" />. Il s'agit d'un ensemble d'objets à choisir, mais un seul peut être sélectionné à la fois. Chacun a un attribut vérifié, et quand on le sélectionne comme ture, les autres deviennent faux.

Postons d'abord un exemple:

Copiez le code comme suit: <script type = "text / javascript">

fonction getChoice () {

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

var achoices = OForm.camera;

for (i = 0; i <achoices.length; i ++) // transférer la table entière d'option unique

if (achoices [i] .checked) // quitter si l'élément sélectionné est trouvé

casser;

alert ("La marque de caméra est:" + Achoices [i] .Value);

}

fonction setChoice (inum) {

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

OFORM.CAMERA [INUM] .Checked = true;

}

</cript>

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

Marque de la caméra:

<p>

<input type = "radio" name = "caméra" id = "canon" value = "canon">

<étiquette pour = "Canon"> Canon </Babel>

</p>

<p>

<input type = "radio" name = "caméra" id = "nikon" value = "nikon">

<étiquette pour = "Nikon"> Nikon </ Label>

</p>

<p>

<input type = "radio" name = "caméra" id = "Sony" value = "Sony" vérifié>

<étiquette pour = "Sony"> Sony </ Label>

</p>

<p>

<input type = "radio" name = "caméra" id = "olympus" value = "olympus">

<étiquette pour = "Olympus"> Olympus </ Label>

</p>

<p>

<input type = "radio" name = "caméra" id = "samsung" value = "samsung">

<étiquette pour = "samsung"> samsung </bable>

</p>

<p>

<input type = "radio" name = "caméra" id = "pentax" value = "pentax">

<étiquette pour = "pentax"> pentax </ label>

</p>

<p>

<input type = "radio" name = "caméra" id = "autres" value = "autres">

<étiquette pour = "autres"> autres </ label>

</p>

<p>

<input type = "soumi" name = "btnsubmit" id = "btnsubmit" value = "soumis">

</p>

<p>

<input type = "bouton" value = "détecter l'objet sélectionné" onClick = "getChoice ();">

<entrée type = "bouton" value = "set sur canon" onclick = "setChoice (0);">

</p>

</ form>

Le bouton radio est dans le formulaire <entrée type = "radio" />. Il s'agit d'un ensemble d'objets à choisir, mais un seul peut être sélectionné à la fois. Chacun a un attribut vérifié, et quand on le sélectionne comme ture, les autres deviennent faux.

À partir du code ci-dessus, on peut voir que l'ID et le nom sont différents, et leurs noms sont les mêmes dans un ensemble de boutons radio, et un seul est sélectionné. L'ID est lié à <Babed> ou à d'autres options.

Parmi le code: le code pour vérifier l'objet sélectionné est (lorsque la valeur chckée d'un certain élément est ture, la traversée se termine)

La copie de code est la suivante: var oform = document.forms ["uform1"];

var achoices = OForm.camera;

for (i = 0; i <achoices.length; i ++) // transférer la table entière d'option unique

if (achoices [i] .checked) // quitter si l'élément sélectionné est trouvé

casser;

alert ("La marque de caméra est:" + Achoices [i] .Value);

2. Définissez plusieurs boîtes de sélection

Contrairement aux boutons radio, la case à cocher <Type d'entrée = "Checkbox" /> peut être sélectionnée en même temps pour le traitement. La case à cocher avant chaque e-mail de la boîte aux lettres est une utilisation typique.

Copiez le code comme suit: <script type = "text / javascript">

Fonction Checkbox () {

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

var objArray = str.length;

var chestr = "";

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

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

Chestr + = str [j] .value + ",";

}

}

if (Chestr == "") {

alert ("Veuillez sélectionner un passe-temps d'abord ~!");

} autre {

alert ("Votre premier choix:" + Chestr);

}

}

Fonction Changeboxes (Action) {

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

var ocheckbox = oform.hobby;

pour (var i = 0; i <ocheckbox.length; i ++) // transférer chaque option

if (action <0) // Sélection inversée

OCHECKBOX [I] .Checked =! Ocheckbox [i] .Checked;

else // Si l'action est 1, sélectionnez tous, et si elle est 0, sélectionnez tout

OCHECKBOX [I] .Checked = Action;

}

</cript>

<form méthode = "post" name = "myform1" action = "addinfo.aspx">

Des choses que vous aimez faire:

<p>

<input type = "checkbox" name = "hobby" id = "ball" value = "ball">

<étiquette pour = "ball"> jouer au basket </ label>

</p>

<p>

<input type = "checkbox" name = "hobby" id = "tv" value = "tv">

<étiquette pour = "TV"> Regardez TV </BALD>

</p>

<p>

<input type = "checkbox" name = "hobby" id = "net" value = "net">

<étiquette pour = "net"> sur Internet </ label>

</p>

<p>

<input type = "checkbox" name = "hobby" id = "book" value = "book">

<label for = "book"> Reading </bable>

</p>

<p>

<input type = "checkbox" name = "hobby" id = "trip" value = "trip">

<étiquette pour = "Trip"> Travel </Babel>

</p>

<p>

<input type = "checkbox" name = "hobby" id = "music" value = "music">

<label for = "music"> music </ label>

</p>

<p>

<input type = "checkbox" name = "hobby" id = "autres" value = "autres">

<étiquette pour = "autres"> autres </ label>

</p>

<p>

<input type = "bouton" value = "SELECT ALL" onClick = "Changeboxes (1);" />

<entrée type = "bouton" value = "Aucune sélection du tout" onClick = "Changeboxes (0);" />

<input type = "bouton" value = "anti-sélection" onClick = "Changeboxes (-1);" />

<input type = "Button" value = "soumi" onclick = "checkbox ()" />

</p>

</ form>

Le principe de la case à cocher est déterminé à l'aide de la valeur booléenne d'attribut coché. Sélectionnez All et la sélection incomplète peut transmettre des paramètres sous la forme de 0 et 1.

3. Menu réduit

Le menu déroulant <lelect> est un élément de formulaire couramment utilisé. Lorsque son effort est sélectionnable par la radio, la fonction du bouton radio <Type d'entrée = "Radio" /> est la même que la fonction du bouton de sélection radio. Lorsque plusieurs = "multiples" sont plusieurs sélectionnables, la fonction est équivalente à la case, mais la zone occupée est beaucoup plus petite que la case à cocher.

Propriétés communes des menus déroulants:

①. Tirez le menu pour obtenir la valeur unique

Copiez le code comme suit: <Script Language = "JavaScript">

Fonction Checksingleding () {

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

var oselectbox = OForm.Conttellation;

var ichoice = oselectbox.selectedIndex; // Obtenez un article sélectionné

alert ("vous avez sélectionné" + oselectbox.options [iChoice] .Text);

}

</cript>

<form mode méthode = "post" name = "myform1">

<étiquette pour = "Constellation"> Signe du zodiaque: </BEALD>

<p>

<select id = "constellation" name = "constellation">

<option value = "aries" selected = "Selected"> Aries </opoption>

<Option Value = "Taurus"> Taurus </ Option>

<option valeur = "Gemini"> Gemini </opoption>

<Option Value = "Cancer"> Cancer </opoption>

<option value = "leo"> lion </ option>

<Option Value = "VIRGO"> VIRGO </ OPTION>

<option value = "libra"> libra </ option>

<Option Value = "Scorpio"> Scorpio </ Option>

<Option Value = "Sagittarius"> SNABEUR </OPTION>

<Option Value = "Capricorn"> Capricorn </ Option>

<Option Value = "Aquarius"> Aquarius </ Option>

<Option Value = "PISSES"> PISSES </ OPTION>

</lect>

</p>

<input type = "bouton" onclick = "checksingle ()" value = "options de vue" />

</ form>

②. Lorsque le menu déroulant est multi-sélection

Copiez le code comme suit: <script type = "text / javascript">

fonction CheckMultiple () {

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

var oselectbox = OForm.Conttellation;

var achoices = new Array ();

// Voyagez l'intégralité du menu déroulant

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

if (oselectbox.options [i] .selected) // si sélectionné

Achoices.push (OselectBox.options [i] .Text); // Appuyez sur le tableau

alert ("vous avez sélectionné:" + achoices.join ()); // Résultat de sortie

}

</cript>

<form mode méthode = "post" name = "myform1">

<étiquette pour = "Constellation"> Signe du zodiaque: </BEALD>

<p>

<select id = "constellation" name = "constellation" multiple = "multiple" style = "height: 180px;">

<option valeur = "Aries"> Aries </opoption>

<Option Value = "Taurus"> Taurus </ Option>

<option valeur = "Gemini"> Gemini </opoption>

<Option Value = "Cancer"> Cancer </opoption>

<option value = "leo"> lion </ option>

<Option Value = "VIRGO"> VIRGO </ OPTION>

<option value = "libra"> libra </ option>

<Option Value = "Scorpio"> Scorpio </ Option>

<Option Value = "Sagittarius"> SNABEUR </OPTION>

<Option Value = "Capricorn"> Capricorn </ Option>

<Option Value = "Aquarius"> Aquarius </ Option>

<Option Value = "PISSES"> PISSES </ OPTION>

</lect>

</p>

<entrée type = "bouton" onclick = "checkMultiple ()" value = "options de vue" />

</ form>

③. Valeur générale (quelque chose qui réduit les choix uniques et multiples)

Copiez le code comme suit: <Script Language = "JavaScript">

fonction getSelectValue (box) {

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

var oselectbox = OForm.Elements [Box]; // Le menu déroulant de sélection correspondant est sélectionné en fonction des paramètres

if (oselectbox.type == "select-one") {// juger s'il s'agit d'un seul ou multiple choix

var ichoice = oselectbox.selectedIndex; // Obtenez un article sélectionné

alert ("unique, vous avez sélectionné" + oselectbox.options [iChoice] .Text);

} autre {

var achoices = new Array ();

// Voyagez l'intégralité du menu déroulant

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

if (oselectbox.options [i] .selected) // si sélectionné

Achoices.push (OselectBox.options [i] .Text); // Appuyez sur le tableau

alert ("Choix multiple, vous avez sélectionné:" + achoices.join ()); // Résultat de sortie

}

}

</cript>

<form mode méthode = "post" name = "myform1">

constellation:

<p>

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

<option value = "aries" selected = "Selected"> Aries </opoption>

<Option Value = "Taurus"> Taurus </ Option>

<option valeur = "Gemini"> Gemini </opoption>

<Option Value = "Cancer"> Cancer </opoption>

<option value = "leo"> lion </ option>

<Option Value = "VIRGO"> VIRGO </ OPTION>

<option value = "libra"> libra </ option>

<Option Value = "Scorpio"> Scorpio </ Option>

<Option Value = "Sagittarius"> SNABEUR </OPTION>

<Option Value = "Capricorn"> Capricorn </ Option>

<Option Value = "Aquarius"> Aquarius </ Option>

<Option Value = "PISSES"> PISSES </ OPTION>

</lect>

<input type = "bouton" onclick = "getSelectValue ('constellation1')" value = "options de vue" />

</p>

<p>

<select id = "constellation2" name = "constellation2" multiple = "multiple" style = "height: 120px;">

<option valeur = "Aries"> Aries </opoption>

<Option Value = "Taurus"> Taurus </ Option>

<option valeur = "Gemini"> Gemini </opoption>

<Option Value = "Cancer"> Cancer </opoption>

<option value = "leo"> lion </ option>

<Option Value = "VIRGO"> VIRGO </ OPTION>

<option value = "libra"> libra </ option>

<Option Value = "Scorpio"> Scorpio </ Option>

<Option Value = "Sagittarius"> SNABEUR </OPTION>

<Option Value = "Capricorn"> Capricorn </ Option>

<Option Value = "Aquarius"> Aquarius </ Option>

<Option Value = "PISSES"> PISSES </ OPTION>

</lect>

<input type = "bouton" onclick = "getSelectValue ('constellation2')" value = "options de vue" />

</p>

</ form>

J'espère que cet article sera utile à la programmation JavaScript de tous.