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

WBOYOriginal: 2016-05-16 18:24:321145browse

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: