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 <input type="radio" /> 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:

<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 list
If (aChoices[i].checked) //Exit if the selected item is found
break;
alert("The camera brand is: " 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="Detect selected object" onclick="getChoice();">
<input type="button" value="Set to Canon" onclick="setChoice(0);">
</p>
</form>

The radio button in the form is <input type="radio" /> 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 <label> 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 < aChoices.length; i ) //Traverse the entire single-choice list
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 <input type="checkbox" /> 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:

<script type="text/javascript">
function checkbox() {
var str = document.getElementsByName("hobby");
var objarray = str.length;
var chestr = "";

for (j = 0; j < objarray; j ) {
If (str[j].checked == true) {
Chestr = str[j].value ",";
}
}
if (chestr == "") {
alert("Please choose a hobby first~!");
} else {
alert("Your first choice is:" chestr);
}
}

function changeBoxes(action) {
var oForm = document.forms["myForm1"];
var oCheckBox = oForm.hobby;                                   for (var i = 0; i < oCheckBox.length; i ) //Traverse each option
If (action < 0) //Reverse selection
oCheckBox[i].checked = !oCheckBox[i].checked;
          else //If the action is 1, then all will be selected, if it is 0, then all will not be selected
oCheckBox[i].checked = action;
}
</script>
<form method="post" name="myForm1" action="addInfo.aspx">

What you like to do:
<p>
<input type="checkbox" name="hobby" id="ball" value="ball">
<label for="ball">Play ball</label>
</p>
<p>
<input type="checkbox" name="hobby" id="TV" value="TV">
<label for="TV">watch TV</label>
</p>
<p>
<input type="checkbox" name="hobby" id="net" value="net">
<label for="net">Internet</label>
</p>
<p>
<input type="checkbox" name="hobby" id="book" value="book">
<label for="book">Reading</label>
</p>
<p>
<input type="checkbox" name="hobby" id="trip" value="trip">
<label for="trip">Travel</label>
</p>
<p>
<input type="checkbox" name="hobby" id="music" value="music">
<label for="music">Music</label>
</p>
<p>
<input type="checkbox" name="hobby" id="others" value="others">
<label for="others">others</label>
</p>
<p>
<input type="button" value="Select All" onclick="changeBoxes(1);" />
<input type="button" value="Select none" onclick="changeBoxes(0);" />
<input type="button" value="Inverse selection" onclick="changeBoxes(-1);" />
<input type="button" value="Submit" onclick="checkbox()" />
</p>
</form>

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<select> is a commonly used form element. When its drop-down menu is for single selection, it has the same function as the radio button <input type="radio" />. 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<option>
selected	Boolean value, indicating whether <option> 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:

<script language="javascript">
Function checkSingle() {
var oForm = document.forms["myForm1"];
var oSelectBox = oForm.constellation;
var iChoice = oSelectBox.selectedIndex; //Get 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">Lion</option>
<option value="Virgo">Virgin</option>
<option value="Libra">Libra</option>
<option value="Scorpio">Scorpio</option>
<option value="Sagittarius">Sagittarius</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 multi-select, the value is

Copy code 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 selected
aChoices.push(oSelectBox.options[i].text); //Push into the array
alert("You selected:" aChoices.join()); //Output results
}
</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">Lion</option>
<option value="Virgo">Virgin</option>
<option value="Libra">Libra</option>
<option value="Scorpio">Scorpio</option>
<option value="Sagittarius">Sagittarius</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>

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

Copy code The code is as follows:

<script language="javascript">
Function getSelectValue(Box) {
var oForm = document.forms["myForm1"];
var oSelectBox = oForm.elements[Box]; //Select drop-down menu according to parameters
if (oSelectBox.type == "select-one") { //Determine whether it is single selection or multiple selection
var iChoice = oSelectBox.selectedIndex; //Get 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 selected
aChoices.push(oSelectBox.options[i].text); //Push into the array
alert("Multiple selection, you selected:" aChoices.join()); //Output results
}
}
</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">Lion</option>
<option value="Virgo">Virgin</option>
<option value="Libra">Libra</option>
<option value="Scorpio">Scorpio</option>
<option value="Sagittarius">Sagittarius</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">Lion</option>
<option value="Virgo">Virgin</option>
<option value="Libra">Libra</option>
<option value="Scorpio">Scorpio</option>
<option value="Sagittarius">Sagittarius</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 be helpful to everyone’s JavaScript programming design.