js method to use DOM to set radio buttons, check boxes and drop-down menus_javascript skills

The example in this article describes how js uses DOM to set radio buttons, check boxes and drop-down menus. Share it with everyone for your reference. The specific implementation method is as follows:

1. Set radio buttons

The radio button in the form is It is a set of objects for the user to select, but only one can be selected at a time. Each one has a checked attribute. When one selection is true, the others become false.

Post an example first:

Copy code The code is as follows:

Camera brand:

Canon

Nikon

Sony

Olympus

Samsung

Pentax

others

The radio button in the form is It is a set of objects for the user to select, but only one can be selected at a time. Each one has a checked attribute. When one selection is true, the others become false.
As can be seen from the above code, the id and name are different. Their names in a group of radio buttons are the same, and only one is selected. The id is bound to or other selection effects.

In the code: the code to check the selected object is (when the chcked value of a certain item is true, the traversal ends)

Copy code The code is as follows:

var oForm = document.forms["uForm1"];
var aChoices = oForm.camera;
for (i = 0; i If (aChoices[i].checked) //Exit if the selected item is found
break;
alert("The camera brand is: " aChoices[i].value);

2. Set multi-select box

Unlike radio buttons, checkboxes can select multiple options for processing at the same time. The checkbox before each email in the mailbox is a typical use

Copy code The code is as follows:

What you like to do:

Play ball

watch TV

Internet

Reading

Travel

Music

others

The check box principle is determined by using the Boolean value of the checked attribute. Parameters can be passed in the form of 0 and 1 to select all and not all.

3. Drop-down menu

Drop-down menu is a commonly used form element. When its drop-down menu is for single selection, it has the same function as the radio button . When the drop-down menu is for multiple selection, when multiple="multiple", its function is equivalent to that of a check box, but it occupies less area. Much smaller than a checkbox.

Common attributes of drop-down menus:

Properties	Description
length	Indicates the number of options
selected	Boolean value, indicating whether is selected
SelectedIndex	The serial number of the selected option, -1 if no option is selected. For multi-select drop-down menus, return the first selected option Serial number, counting from 0
text	Text of option
value	Option value
type	The type of drop-down menu, single selection returns select-one, multiple selection returns select-multiple
options	Get the array of options, for example: oSelectBox.options[2], which represents the third item of the drop-down menu oSelectBox

①. Get the radio selection value from the drop-down menu

Copy code The code is as follows:

Constellation:

Aries
Taurus
Gemini
Cancer
Lion
Virgin
Libra
Scorpio
Sagittarius
Capricorn
water bottle
Pisces

②. When the drop-down menu is multi-select, the value is

Copy code The code is as follows:

Constellation:

Aries
Taurus
Gemini
Cancer
Lion
Virgin
Libra
Scorpio
Sagittarius
Capricorn
water bottle
Pisces

③. Universal value (drop-down single selection and multiple selection)

Copy code The code is as follows:

Constellation:

Aries
Taurus
Gemini
Cancer
Lion
Virgin
Libra
Scorpio
Sagittarius
Capricorn
water bottle
Pisces

Aries
Taurus
Gemini
Cancer
Lion
Virgin
Libra
Scorpio
Sagittarius
Capricorn
water bottle
Pisces

I hope this article will be helpful to everyone’s JavaScript programming design.