Jquery-based checkbox drop-down box plug-in code

Option_check.js code:
Copy codeThe Code is as follows:
/*************************************** **
The call method is as follows:
Jselect ($ ("# inputid "),{
Bindid: 'bindid ',
Hoverclass: 'hoverclass ',
Optionsbind: function () {return hqhtml ();}
});
Inputid is the id of the text box to be bound to the drop-down box.
Bindid is the Control id in the pop-up/pull-back drop-down box.
Hoverclass is the style when you move the cursor over the option.
Hqhtml is the bound data
**************************************** **/
(Function ($ ){
$. Showselect = {
Init: function (o, options ){
Var defaults = {
Bindid: null, // bind the event to bindid
Hoverclass: null, // style name when you move the cursor over the option
Optionsbind: function () {}// bind a function to the drop-down list
}
Var options = $. extend (defaults, options );
If (options. optionsbind! = Null) {// If the binding function is not empty
This. _ setbind (o, options );
}
If (options. bindid! = Null ){
This. _ showcontrol (o, options );
}
},
_ Showcontrol: function (o, options) {// control the drop-down list
$ ("#" + Options. bindid). toggle (function (){
$ (O). next (). slideDown ();
}, Function (){
$ (O). next (). slideUp ();
})
},
_ Setbind: function (o, options) {// bind data
Var optionshtml = "<div style = \" z-index: 999; position: absolute; \ ">"
+ Options. optionsbind () + "</div> ";
$ (O). after (optionshtml );
Var offset = $ (o). offset ();
Var w = $ (o). width ();
Detail (o).next().css ({top: offset. top + $ (o). height () + 7, left: offset. left, width: w });
If (options. hoverclass! = Null ){
$ (O). next (). find ("tr"). hover (function () {$ (this). addClass (options. hoverclass );},
Function () {$ (this). removeClass (options. hoverclass );});
}
$ (O ). next (). find ("input [type = checkbox]"). filter ("[lang = checked]"). each (function () {$ (this ). attr ("checked", "checked ");});
$ (O). next (). find ("input [type = checkbox]"). click (function (){
Var $ ckoption = $ (this). attr ("checked ");
If ($ ckoption ){
$ (This). attr ("checked ","");
} Else {
$ (This). attr ("checked", "checked ");
}
});
$ (O). next (). find ("tr"). click (function (){
Var $ ckflag = $ (this). find ("input [type = checkbox]");
If ($ ckflag. attr ("checked ")){
$ Ckflag. attr ("checked ","");
$ Ckflag. attr ("lang ","");
}
Else {
$ Ckflag. attr ("checked", "checked ");
$ Ckflag. attr ("lang", "checked ");
}
Var selarray = new Array ();
$ (O). next (). find ("input [type = checkbox]"). each (function (){
If ($ (this). attr ("checked "))
Selarray. push ($ (this). parent (). next (). text ());
});
$ (O). val (selarray. join (','));
});
$ (O). next (). hide ();
}
}
Jselect = function (o, json ){
$. Showselect. init (o, json );
};
}) (JQuery );

Html code:
Copy codeThe Code is as follows:
<Script type = "text/javascript" src = "jquery-1.4.2.min.js"> </script>
<Script type = "text/javascript" src = "option_check.js"> </script>
<Style type = "text/css">
. Hover
{
Background-color: Blue;
Color: White;
}
</Style>
<Script type = "text/javascript">
$ (Function (){
Jselect ($ ("# txt_wbk "),{
Bindid: 'txt _ wbk ', // You can bind it to the button. The drop-down box is displayed in the click Text Box.
Hoverclass: 'hover ',
Optionsbind: function () {return hqhtml ();}
});
})
Function hqhtml () {// You can splice the value in the database with html. Note: The lang = 'checked' attribute is added to the pre-Options.
Var optionshtml = "<table style = 'width: 100%; background-color: red' cellpadding = \" 0 \ "cellspacing = \" 0 \ ">"
+ "<Tr> <td style = 'width: 20px '> <input type = \ "checkbox \" value = '1'/> </td> <td> Item 1 </td> </tr>"
+ "<Tr> <td> <input type = \" checkbox \ "value = '2' lang = 'checked'/> </td> <td> Item 2 </ td> </tr>"
+ "<Tr> <td> <input type = \" checkbox \ "value = '3'/> </td> <td> Item 3 </td> </tr >"
+ "<Tr> <td> <input type = \" checkbox \ "value = '4'/> </td> <td> Item 4 </td> </tr> </table> ";
Return optionshtml;
}
</Script>
<Div>
<Input id = "txt_wbk" type = "text" style = "width: 200px;"/> drop-down box test
</Div>