Home  >  Article  >  Web Front-end  >  Checkbox drop-down box plug-in code based on jquery_jquery

Checkbox drop-down box plug-in code based on jquery_jquery

WBOY
WBOYOriginal
2016-05-16 18:24:321164browse

option_check.js code:

Copy code The code is as follows:

/*****************************************
The calling method is:
Jselect ($("#inputid"),{
bindid:'bindid',
hoverclass:'hoverclass',
optionsbind:function(){return hqhtml();}
});
inputid is the text box id to be bound to the drop-down box
bindid is the control id of the click to pop up/retract the drop-down box
hoverclass is the style when the mouse moves to the option
hqhtml is the bound data
************************************************* /
(function($){
$.showselect = {
init : function(o,options){
var defaults = {
bindid : null, //The event is bound to
hoverclass:null on bindid, //The style name when the mouse moves to the option
optionsbind:function(){} //The drop-down box binding function
}
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 box display
$(" #" 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();
$(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 code The code is as follows: