Js uses DOM to set single-choice buttons, check boxes, and drop-down menu Methods

Js uses DOM to set single-choice buttons, check boxes, and drop-down menu Methods

This article describes how to use DOM to set single-choice buttons, check boxes, and drop-down menus in Javascript. It gives a detailed analysis of the usage and implementation skills of Single-choice buttons, check boxes, and drop-down menus, it is very practical. For more information, see

 

 

This article describes how to use DOM to set single-choice buttons, check boxes, and drop-down menus in JavaScript. Share it with you for your reference. The specific implementation method is as follows:

1. Set the radio button

The single-choice button is <input type = "radio"/> In the form. It is a group of objects for users to choose from, but only one can be selected at a time. Each item has the checked attribute. When one item is set to true, all others change to false.

First paste an example:

The Code is as follows:

<Script type = "text/javascript">
Function getChoice (){
Var oForm = document. forms ["uForm1"];
Var aChoices = oForm. camera;
For (I = 0; I <aChoices. length; I ++) // traverse the entire Single-choice table
If (aChoices [I]. checked) // exit if the selected item is found
Break;
Alert ("camera brand:" + aChoices [I]. value );
}

 

Function setChoice (iNum ){
Var oForm = document. forms ["uForm1"];
OForm. camera [iNum]. checked = true;
}
</Script>
<Form method = "post" name = "uForm1" action = "addInfo. aspx">
Camera brand:
<P>
<Input type = "radio" name = "camera" id = "canon" value = "Canon">
<Label for = "canon"> Canon </label>
</P>
<P>
<Input type = "radio" name = "camera" id = "nikon" value = "Nikon">
<Label for = "nikon"> Nikon </label>
</P>
<P>
<Input type = "radio" name = "camera" id = "sony" value = "Sony" checked>
<Label for = "sony"> Sony </label>
</P>
<P>
<Input type = "radio" name = "camera" id = "olympus" value = "Olympus">
<Label for = "olympus"> Olympus </label>
</P>
<P>
<Input type = "radio" name = "camera" id = "samsung" value = "Samsung">
<Label for = "samsung"> Samsung </label>
</P>
<P>
<Input type = "radio" name = "camera" id = "pentax" value = "Pentax">
<Label for = "pentax"> Pentax </label>
</P>
<P>
<Input type = "radio" name = "camera" id = "others" value = "others">
<Label for = "others"> others </label>
</P>
<P>
<Input type = "submit" name = "btnSubmit" id = "btnSubmit" value = "Submit" class = "btn">
</P>
<P>
<Input type = "button" value = "check selected object" onclick = "getChoice ();">
<Input type = "button" value = "set to Canon" onclick = "setChoice (0);">
</P>
</Form>

 

The single-choice button is <input type = "radio"/> In the form. It is a group of objects for users to choose from, but only one can be selected at a time. Each item has the checked attribute. When one item is set to true, all others change to false.
From the code above, we can see that IDs and names are different. In a group of radio buttons, their names are the same and only one is selected. Id is bound to the <label> or other options.

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

The Code is as follows:

Var oForm = document. forms ["uForm1"];
Var aChoices = oForm. camera;
For (I = 0; I <aChoices. length; I ++) // traverse the entire Single-choice table
If (aChoices [I]. checked) // exit if the selected item is found
Break;
Alert ("camera brand:" + aChoices [I]. value );

 

2. Set the multiple choice box

Unlike the single-choice button, the check box <input type = "checkbox"/> can select multiple options for processing at the same time. The check box before each email in the mailbox is typically used.

The Code is as follows:

<Script type = "text/javascript">
Function checkbox (){
Var str = document. getElementsByName ("holobby ");
Var objarray = str. length;
Var chestr = "";

For (j = 0; j <objarray; j ++ ){
If (str [j]. checked = true ){
Chestr + = str [j]. value + ",";
}
}
If (chestr = ""){
Alert ("select a hobby first ~! ");
} Else {
Alert ("your first choice is:" + chestr );
}
}

 

Function changeBoxes (action ){
Var oForm = document. forms ["myForm1"];
Var oCheckBox = oForm. holobby;
For (var I = 0; I <oCheckBox. length; I ++) // traverse each option
If (action <0) // reselect
OCheckBox [I]. checked =! OCheckBox [I]. checked;
Else // if the value of action is 1, all are selected. If the value is 0, all are not selected.
OCheckBox [I]. checked = action;
}
</Script>

<Form method = "post" name = "myForm1" action = "addInfo. aspx">
What you like to do:
<P>
<Input type = "checkbox" name = "holobby" id = "ball" value = "ball">
<Label for = "ball"> ball </label>
</P>
<P>
<Input type = "checkbox" name = "holobby" id = "TV" value = "TV">
<Label for = "TV"> watch TV </label>
</P>
<P>
<Input type = "checkbox" name = "holobby" id = "net" value = "net">
<Label for = "net"> surfing the Internet </label>
</P>
<P>
<Input type = "checkbox" name = "holobby" id = "book" value = "book">
<Label for = "book"> reading </label>
</P>
<P>
<Input type = "checkbox" name = "holobby" id = "trip" value = "trip">
<Label for = "trip"> travel </label>
</P>
<P>
<Input type = "checkbox" name = "holobby" id = "music" value = "music">
<Label for = "music"> music </label>
</P>
<P>
<Input type = "checkbox" name = "holobby" id = "others" value = "others">
<Label for = "others"> others </label>
</P>
<P>
<Input type = "button" value = "select all" onclick = "changeBoxes (1);"/>
<Input type = "button" value = "NONE" onclick = "changeBoxes (0);"/>
<Input type = "button" value = "invert" onclick = "changeBoxes (-1);"/>
<Input type = "button" value = "Submit" onclick = "checkbox ()"/>
</P>
</Form>

 

The check box principle is determined using the Boolean value of the checked attribute. If you select all or not, you can pass the parameters in the form of 0 or 1.

3. drop-down menu

The drop-down menu <select> is a commonly used form element. When the drop-down menu is single-choice, it is similar to the single-choice button <input type = "radio"/> function. When the drop-down menu is multiple-choice, multiple = "multiple, the function is equivalent to the check box, but the occupied area is much smaller than the check box.

Common Properties of the drop-down menu:

Attribute	Description
Length	Number of options <option>
Selected	Boolean value, indicating whether or not <option> is selected
SelectedIndex	The serial number of the selected option. If no option is selected, the value is-1. For Multiple drop-down menus, the first selected option is returned. Is counted from 0.
Text	Option text
Value	Option value
Type	Type of the drop-down menu. select-one is returned for one choice. select-multiple is returned for multiple choices.
Options	Returns an array of options. For example, oSelectBox. options [2] indicates the third item of oSelectBox in the drop-down menu.

①. Obtain the single-choice value from the drop-down menu

The Code is as follows:

<Script language = "javascript">
Function checkSingle (){
Var oForm = document. forms ["myForm1"];
Var oSelectBox = oForm. constellation;
Var iChoice = oSelectBox. selectedIndex; // obtain the selected item
Alert ("You selected" + oSelectBox. options [iChoice]. text );
}
</Script>

 

<Form method = "post" name = "myForm1">
<Label for = "constellation"> constellation: </label>
<P>
<Select id = "constellation" name = "constellation">
<Option value = "Aries" selected = "selected"> Aries </option>
<Option value = "Taurus"> Taurus </option>
<Option value = "Gemini"> Gemini </option>
<Option value = "Cancer"> Cancer </option>
<Option value = "Leo"> Leo </option>
<Option value = "Virgo"> virgins </option>
<Option value = "Libra"> Libra </option>
<Option value = "Scorpio"> Scorpio </option>
<Option value = "Sagittarius"> shooter </option>
<Option value = "Capricorn"> Capricorn </option>
<Option value = "Aquarius"> water bottle </option>
<Option value = "Pisces"> Pisces </option>
</Select>
</P>
<Input type = "button" onclick = "checkSingle ()" value = "view options"/>
</Form>

 

②. When the drop-down menu is multiple, the value is

The Code is as follows:

<Script type = "text/javascript">
Function checkMultiple (){
Var oForm = document. forms ["myForm1"];
Var oSelectBox = oForm. constellation;
Var aChoices = new Array ();
// Traverse the entire drop-down menu
For (var I = 0; I <oSelectBox. options. length; I ++)
If (oSelectBox. options [I]. selected) // if it is selected
AChoices. push (oSelectBox. options [I]. text); // press it into the array.
Alert ("You selected:" + aChoices. join (); // output result
}
</Script>

 

<Form method = "post" name = "myForm1">
<Label for = "constellation"> constellation: </label>
<P>
<Select id = "constellation" name = "constellation" multiple = "multiple" style = "height: 180px;">
<Option value = "Aries"> Aries </option>
<Option value = "Taurus"> Taurus </option>
<Option value = "Gemini"> Gemini </option>
<Option value = "Cancer"> Cancer </option>
<Option value = "Leo"> Leo </option>
<Option value = "Virgo"> virgins </option>
<Option value = "Libra"> Libra </option>
<Option value = "Scorpio"> Scorpio </option>
<Option value = "Sagittarius"> shooter </option>
<Option value = "Capricorn"> Capricorn </option>
<Option value = "Aquarius"> water bottle </option>
<Option value = "Pisces"> Pisces </option>
</Select>
</P>
<Input type = "button" onclick = "checkMultiple ()" value = "view options"/>
</Form>

 

③. General values (single-choice and multiple-choice drop-down cases)

The Code is as follows:

<Script language = "javascript">
Function getSelectValue (Box ){
Var oForm = document. forms ["myForm1"];
Var oSelectBox = oForm. elements [Box]; // select the drop-down menu based on the corresponding parameters
If (oSelectBox. type = "select-one") {// You can select one or more options.
Var iChoice = oSelectBox. selectedIndex; // obtain the selected item
Alert ("single choice, you selected" + oSelectBox. options [iChoice]. text );
} Else {
Var aChoices = new Array ();
// Traverse the entire drop-down menu
For (var I = 0; I <oSelectBox. options. length; I ++)
If (oSelectBox. options [I]. selected) // if it is selected
AChoices. push (oSelectBox. options [I]. text); // press it into the array.
Alert ("Multiple choices, you selected:" + aChoices. join (); // output result
}
}
</Script>

 

<Form method = "post" name = "myForm1">
Constellation:
<P>
<Select id = "constellation1" name = "constellation1">
<Option value = "Aries" selected = "selected"> Aries </option>
<Option value = "Taurus"> Taurus </option>
<Option value = "Gemini"> Gemini </option>
<Option value = "Cancer"> Cancer </option>
<Option value = "Leo"> Leo </option>
<Option value = "Virgo"> virgins </option>
<Option value = "Libra"> Libra </option>
<Option value = "Scorpio"> Scorpio </option>
<Option value = "Sagittarius"> shooter </option>
<Option value = "Capricorn"> Capricorn </option>
<Option value = "Aquarius"> water bottle </option>
<Option value = "Pisces"> Pisces </option>
</Select>
<Input type = "button" onclick = "getSelectValue ('constellation1')" value = "view options"/>
</P>
<P>
<Select id = "constellation2" name = "constellation2" multiple = "multiple" style = "height: 120px;">
<Option value = "Aries"> Aries </option>
<Option value = "Taurus"> Taurus </option>
<Option value = "Gemini"> Gemini </option>
<Option value = "Cancer"> Cancer </option>
<Option value = "Leo"> Leo </option>
<Option value = "Virgo"> virgins </option>
<Option value = "Libra"> Libra </option>
<Option value = "Scorpio"> Scorpio </option>
<Option value = "Sagittarius"> shooter </option>
<Option value = "Capricorn"> Capricorn </option>
<Option value = "Aquarius"> water bottle </option>
<Option value = "Pisces"> Pisces </option>
</Select>
<Input type = "button" onclick = "getSelectValue ('constellation2')" value = "view options"/>
</P>
</Form>

 

I hope this article will help you design javascript programs.