JS Click on the text box to eject the selectable checkbox checkbox _javascript Tips

Source: Internet
Author: User

This article shares a piece of code example, it can click the text box, the ability to pop down the CheckBox checkbox, select the check box to be able to write the value of the text box, may be in the actual application of the effect is not so straightforward and simple, but can be used as an example demo, so that learners understand and expand. The
code is as follows:


The above code to fulfill our requirements, the following describes its implementation process.
Code Comment:
1.$ (function () {}), executes code in the function when the document structure is completely loaded.
2.var position=$ ("#xx"). Offset (), gets the offset of the text box relative to the documents document, and the offset () function returns an object. This object contains two properties left and top, representing the horizontal and vertical offsets relative to the document.
3.$ ("#div1"). Offset ({top:position.top+22,left:position.left}), Sets the offset of the relative document for the pop-up Drop-down menu container, the first plus 22 to make it appear below the text box.
4.$ ("#xx"). Click (function () {$ ("#NG"). Toggleclass ("Open");}, Register the Click event handler for the text box, click it to toggle the style class open Delete and add, that is, set the Drop-down menu display and hide.
5.$ ("#div1 input[name=ng]"). Click (function () {}) registers the Click event handler for a text box with the Name property value of NG.
6.var arr=new Array (), creates an array that holds the value value of the Check checkbox for the selected checkbox.
7.$ ("input[name=ng]:checked"). each (function (key,value) {arr[key]=$ (value). val ();}), The stores the value of the selected check box in an array.
8.$ ("#xx"). Val (Arr.join (","); concatenate an array element into a string to write to a text box.

Hopefully this article will help you learn about JavaScript programming.

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.