Click the text box to display the available checkbox check box code instance,

Click the text box to display the available checkbox check box code instance,

Click the text box to pop up the available checkbox check box code instance:
This section shares a code example. When you click the text box, the checkbox check box in the drop-down list is displayed. You can select the check box to write the value to the text box, it may not be so straightforward and simple in practical application, but it can be demonstrated as an example to facilitate the learner's understanding and expansion.
The Code is as follows:

<! DOCTYPE html> 
The above Code meets our requirements. Next we will introduce its implementation process.
I. Code comments:
1. $ (function () {}). When the document structure is fully loaded, run the code in the function.
2. var position = $ ("# xx "). offset () is used to obtain the offset of the text box relative to the document. The offset () function returns an object that contains the left and top attributes, indicating the horizontal and vertical offset relative to the document, respectively.
3. $ ("# div1 "). offset ({top: position. top + 22, left: position. left}), set the Relative document offset of the pop-up drop-down menu container, the first plus 22 is to make it appear below the text box.
4. $ ("# xx "). click (function () {$ ("# NG "). toggleClass ("open") ;}), registers the click event handler function for the text box, and click it to switch the style class open Delete and add, that is, set the display and hide of the drop-down menu.
5. $ ("# div1 input [name = ng]"). click (function () {}) to register the click event processing function for the text box with the name attribute value ng.
6. var arr = new Array () creates an Array to store the value of the checkbox check box.
7. $ ("input [name = ng]: checked "). each (function (key, value) {arr [key] = $ (value ). val () ;}) to save the value of the selected check box to an array.
8. $ ("# xx"). val (arr. join (","); concatenates array elements into strings and writes them to the text box.
Ii. Related reading:
1. For details about the offset () function, see the offset () method section of jQuery.
2. For the toggleClass () function, see the toggleClass () method section of jQuery.
3. For details about input [name = ng], see [attribute = value] selector in jQuery.
4. For details about the each () function, refer to the each () method section of jQuery.
5. For more information about the val () function, see the val () method section of jQuery.
6. For the join () function, see the join () method section of the Array object in javascript.
The original address is: http://www.softwhy.com/forum.php? Mod = viewthread & tid = 14219.
For more information, see: http://www.softwhy.com/jquery/