Javascript checkbox tick and reverse check detailed

Source: Internet
Author: User
The code is as follows Copy Code

<input type= "checkbox" name= "checkbox" value= "" id= "checkbox"/>

The JavaScript processing checkbox is summarized as follows

1,javascript checked checkbox form
(1) Get the Form object
(2) Set the checked value of the Form object, true to tick the check or reverse the selection

The code is as follows Copy Code

document.getElementById ("checkbox"). Checked = True

2,javascript Get all CheckBox form objects on page
(1) root tag tagname get all input objects
(2) If the object type is a checkbox, the checkbox form

The code is as follows Copy Code

var checkbox = document.getelementsbytagname ("input");
For (Var i=0,length=checkbox. length;i<length;i++) {
if (Checkbox.type = = ' checkbox ') {
CheckBox form
}
}

3, the realization of the checkbox form adjacent to the element click Tick, click "Select" CheckBox form

The code is as follows Copy Code

<input type= "checkbox" name= "checkbox" value= "id= checkbox"/><span> selected </span>

var checkbox = document.getElementById ("checkbox");
var nextobj = checkbox.nextsibling;
Nextobj.onclick = function () {
This.previousSibling.click ();
}

Note the application of two adjacent elements nextsibling and previoussibling.

Resources
XML DOM nextSibling Property
The NextSibling property returns the element immediately following an element (in the same tree hierarchy).
If there is no this node, the property returns NULL.
Syntax: nodeobject.nextsibling

XML DOM PreviousSibling Property
The PreviousSibling property returns the node immediately preceding a node (at the same tree level)
If there is no this node, the property returns NULL.
Syntax: nodeobject.previoussibling

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.