Home > Developer > Web Develop
Check box for JavaScript operation checkbox, javascriptcheckbox
Similar to radio, JavaScript uses the checked attribute of element items. First, get the checkbox Element Set, traverse the set, and perform operations on each item in the set.
Here are some common examples of commonly used checkbox check boxes.
Given page
<Body> <p> <label for = "holobby"> holobby: <input type = "checkbox" name = "holobby" value = "reading"/> Read <input type = "checkbox" name = "holobby" value = "climbing"/> mountain climbing <input type = "checkbox" name = "holobby" value = "running"/> running <input type = "checkbox" name = "holobby" value = "fishing"/> phishing <input type = "checkbox" name = "holobby" value = "cooking"/> cooking </br> <input type = "button" value = "Get Value ""onclick =" getValue () "/> </label> </p> </body>
What should I do if I want to get the value of the Multi-choice box?
The procedure is the same as obtaining the radio button value.
1. Get the checkbox Element Set
2. traverse the checkbox Element
3. splice the values of the selected check box and return
function getValue(){var hobbies = document.getElementsByName("hobby");var value;for (i=0; i
Here We splice the check box values and separate them with commas (,). If the returned value is not selected, an empty string is returned, instead of the default undefined null value in JavaScript.
Select All
Select All is a common operation in the check box. Select all options.
The select all operation is based on the checked attribute. it traverses all element items and sets the checked attribute of each element item to true.
<Body> <p> <label for = "holobby"> holobby: <input type = "button" name = "selectAll" value = "selectAll" onclick = "selectAll () "/> select all <input type =" button "name =" selectOther "value =" selectOther "onclick =" selectOther () "/> invert selection </br> <input type =" checkbox "name =" holobby "value =" reading "/> Read <input type =" checkbox "name = "Hober" value = "climbing"/> mountain climbing <input type = "checkbox" name = "Hober" value = "running"/> running <input type = "checkbox" name = "holobby" value = "fishing"/> phishing <input type = "checkbox" name = "holobby" value = "cooking"/> cooking </br> <input type = "button" value = "Get Value" onclick = "getValue () "/> </label> </p> </body>
When selecting all, you must first determine whether the current check box is in the all-selected status, and then select all at the right time or not.
Determines whether the instance is in the all-selected status: true, all selected; false, not all selected
function isSelectAll(){var hobbies = document.getElementsByName("hobby");for (i=0; i
Select All
function selectAll(){var hobbies = document.getElementsByName("hobby");if (isSelectAll()){for (i=0; i
Invert Selection
Select the items that are not selected and cancel the selected items.
function selectOther(){var hobbies = document.getElementsByName("hobby");for (i=0; i
In the above examples, I have nothing to do today. Some operations may not be very consistent with the customer experience. If you have a better solution, you can propose it. But through the above example, we should be able to understand the checkbox well.
ActuallyCheckboxAndRadioAll are based onCheckedAttribute. the operation on them is the operation on the checked attribute, and the technology checked attribute is enough.
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
