This article describes how to set radio buttons, check boxes and drop-down menus using DOM by js. Share it for your reference. The specific implementation method is as follows:
1. Set radio buttons
The radio button is in the form <input type="radio" />. It is a set of objects for users to choose, but only one can be selected at a time. Each has a checked attribute, and when one selects it as ture, the others become false.
Let's post an example first:
Copy the code as follows:<script type="text/javascript">
function getChoice() {
var oForm = document.forms["uForm1"];
var aChoices = oForm.camera;
for (i = 0; i < aChoices.length; i++) //Transfer the entire single option table
if (aChoices[i].checked) // Exit if the selected item is found
break;
alert("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">
</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 is in the form <input type="radio" />. It is a set of objects for users to choose, but only one can be selected at a time. Each has a checked attribute, and when one selects ture, the others become false.
From the above code, the id and name are different, and their names are the same in a set of radio buttons, and only one is selected. id is bound to <label> or other options.
Among the code: the code to check the selected object is (when the chcked value of a certain item is ture, the traversal ends)
The code copy is as follows: var oForm = document.forms["uForm1"];
var aChoices = oForm.camera;
for (i = 0; i < aChoices.length; i++) //Transfer the entire single option table
if (aChoices[i].checked) // Exit if the selected item is found
break;
alert("camera brand is:" + aChoices[i].value);
2. Set multiple selection boxes
Unlike radio buttons, the check box <input type="checkbox" /> can be selected at the same time for processing. The check box before each email in the mailbox is a typical use.
Copy the code 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 select a hobby first~!");
} else {
alert("Your first choose:" + chestr);
}
}
function changeBoxes(action) {
var oForm = document.forms["myForm1"];
var oCheckBox = oForm.hobby;
for (var i = 0; i < oCheckBox.length; i++) //Transfer each option
if (action < 0) //Reverse selection
oCheckBox[i].checked = !oCheckBox[i].checked;
else // If the action is 1, select all, and if it is 0, select all
oCheckBox[i].checked = action;
}
</script>
<form method="post" name="myForm1" action="addInfo.aspx">
Things you like to do:
<p>
<input type="checkbox" name="hobby" id="ball" value="ball">
<label for="ball">playing basketball</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">On the 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="No selection at all" onclick="changeBoxes(0);" />
<input type="button" value="Anti-select" onclick="changeBoxes(-1);" />
<input type="button" value="submit" onclick="checkbox()" />
</p>
</form>
The checkbox principle is determined using the checked attribute Boolean value. Select all and incomplete selection can pass parameters in the form of 0 and 1.
3. Pull-down menu
The drop-down menu <select> is a commonly used form element. When its pull-down is radio selectable, the function of the radio button <input type="radio" /> is the same as the function of the radio selectable button. When multiple="multiple" is multiple selectable, the function is equivalent to the check box, but the area occupied is much smaller than the check box.
Common properties of drop-down menus:
| property | illustrate |
| length | Indicates the number of options <option> |
| selected | Boolean value indicating whether <option> is selected |
| SelectedIndex | The serial number of the selected option is -1 if no option is selected. For the multi-select drop-down menu, return to the first selected The sequence number starts from 0 |
| text | Options text |
| value | Value of option |
| type | The type of drop-down menu, single-choice returns select-one, multiple-choice returns select-multiple |
| options | Get an array of options, for example: oSelectBox.options[2], indicating the third item of oSelectBox on the drop-down menu |
①. Pull down menu to get the single-select value
Copy the code as follows:<script language="javascript">
function checkSingle() {
var oForm = document.forms["myForm1"];
var oSelectBox = oForm.constellation;
var iChoice = oSelectBox.selectedIndex; //Get selected item
alert("You selected" + oSelectBox.options[iChoice].text);
}
</script>
<form method="post" name="myForm1">
<label for="constellation">Zodiac sign:</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">Virgo</option>
<option value="Libra">Libra</option>
<option value="Scorpio">Scorpio</option>
<option value="Sagittarius">Snorker</option>
<option value="Capricorn">Capricorn</option>
<option value="Aquarius">Aquarius</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, take the value
Copy the code as follows:<script type="text/javascript">
function checkMultiple() {
var oForm = document.forms["myForm1"];
var oSelectBox = oForm.constellation;
var aChoices = new Array();
//Travel 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); //Press into the array
alert("You selected:" + aChoices.join()); //Output result
}
</script>
<form method="post" name="myForm1">
<label for="constellation">Zodiac sign:</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">Virgo</option>
<option value="Libra">Libra</option>
<option value="Scorpio">Scorpio</option>
<option value="Sagittarius">Snorker</option>
<option value="Capricorn">Capricorn</option>
<option value="Aquarius">Aquarius</option>
<option value="Pisces">Pisces</option>
</select>
</p>
<input type="button" onclick="checkMultiple()" value="View Options" />
</form>
③. General value (something that pull down single and multiple choices)
Copy the code as follows:<script language="javascript">
function getSelectValue(Box) {
var oForm = document.forms["myForm1"];
var oSelectBox = oForm.elements[Box]; //The corresponding selection drop-down menu is selected according to the parameters
if (oSelectBox.type == "select-one") { //Judge whether it is a single or multiple choice
var iChoice = oSelectBox.selectedIndex; //Get selected item
alert("Single-select, you selected" + oSelectBox.options[iChoice].text);
} else {
var aChoices = new Array();
//Travel 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); //Press into the array
alert("Multiple choice, 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">Lion</option>
<option value="Virgo">Virgo</option>
<option value="Libra">Libra</option>
<option value="Scorpio">Scorpio</option>
<option value="Sagittarius">Snorker</option>
<option value="Capricorn">Capricorn</option>
<option value="Aquarius">Aquarius</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">Virgo</option>
<option value="Libra">Libra</option>
<option value="Scorpio">Scorpio</option>
<option value="Sagittarius">Snorker</option>
<option value="Capricorn">Capricorn</option>
<option value="Aquarius">Aquarius</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.