Home > Developer > JavaScript
The way JavaScript operates a checkbox is similar to how it operates radio, using the checked property of element items. Gets the checkbox element collection, iterates through the collection, and operates on each item in the collection.
Here are a few common examples of commonly used checkbox check boxes.
Given page
<body><p><label for= "Hobby" >hobby: <input type= "checkbox" name= "hobby" value= "reading"/> Reading & Lt;input type= "checkbox" name= "hobby" value= "climbing"/> Mountain climbing <input type= "checkbox" name= "Hobby" value= "Running"/ > Run <input type= "checkbox" name= "hobby" value= "fishing"/> Fishing <input type= "checkbox" name= "Hobby" value= "COO King "/> Cooking </br></br><input type=" button "value=" Get value "onclick=" GetValue () "/></label ></p></body>
To get the value of a multi-box, what do you do with it?
The same steps as getting the radio radio button value.
1 Get check box element collection
2 Traversing check box elements
3 stitch The values of the selected check boxes and return
function GetValue () {var hobbies = Document.getelementsbyname ("hobby"); var value;for (i=0; iHere we are stitching out the check box values, separated by ",", returned, if not checked, returns an empty string, not the default null value of JavaScript undefined.
Select All
Select All is a common action in the check box, and all options are selected.
Select All is also based on the operation of the checked property, traversing all element items, and placing each element item's checked property as true.
<body><p><label for= "Hobby" >hobby: <input type= "button" Name= "SelectAll" value= "SelectAll" Onclick= "SelectAll ()"/> Select all <input type= "button" Name= "Selectother" value= "Selectother" onclick= "SelectOther ()" /> </br></br><input type= "checkbox" name= "hobby" value= "reading"/> Read <input type= "checkbox "Name=" hobby "value=" Climbing "/> Mountain <input type=" checkbox "name=" Hobby "value=" Running "/> Run <input type=" c Heckbox "name=" hobby "value=" fishing "/> Fishing <input type=" checkbox "name=" hobby "value=" cooking "/> Cooking </br> ; </br><input type= "button" value= "Get value" onclick= "GetValue ()"/></label></p></body >When you select all, you first need to determine whether the current check box is in a state of full selection, then select All in a timely manner, or select all.
Determine whether it is all selected: True, select All, False, not select all
function Isselectall () {var hobbies = Document.getelementsbyname ("hobby"); for (i=0; i
Select all Operationfunction SelectAll () {var hobbies = Document.getelementsbyname ("hobby"), if (Isselectall ()) {for (i=0; i< Hobbies.length; i++) {hobbies[i].checked = false;}} else {for (i=0; i
Inverse Selection
The unselected action selects those items that are not currently selected and cancels the currently selected item.
function Selectother () {var hobbies = Document.getelementsbyname ("hobby"); for (i=0; i
The above examples, are I have nothing to write today's play, there may be some operations are not very consistent with the customer experience, if you have a better solution, can be proposed. But with the above example, you should be able to understand the checkbox very well.
In fact, the checkbox and Radio , are based on the checked attribute, the operation of them is the operation of the checked attribute, the technical checked properties can be.
JavaScript Action checkbox check box
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
