The first plug-in written by Feng Yi looks like a finger. The jquery-based checkbox drop-down box plug-in option_check.js code is as follows:
The 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 ="
"
+ Options. optionsbind () +"
";
$ (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:
The Code is as follows: