用鼠标拖拉来选中checkbox

(function($){
	/*-----------------------------------------------------------------/
	功能：用鼠标拖拉来选中checkbox
	参数：无
	返回：原调用对象
	示例：$('#testtable').squareSelection();
	author: hushuilong
	email: [e-mail]
	/-----------------------------------------------------------------*/	
	$.fn.squareSelection=function(){

		var container = $(this);
		var stop_pop = function(e) {
			try {
				e.stopPropagation();
			} catch(err) {
				window.event.cancelBubble = true;
			}
		};
		var box = function(){
			if($('#square_selection_box').length == 0){
				$('<div></div>',{id:'square_selection_box', style: [
					'position:absolute; top:0; left:0;',
					'border:1px solid #072246; background: #6bb0c9;',
					'filter:Alpha(Opacity=15); opacity:0.15;',
					'overflow:hidden;display:none;z-index:99999;'
				].join('')}).appendTo(document.body);
			}
			return $('#square_selection_box');
		};
		var init = function(){
			document.oncontextmenu=function(){ return false; }; 
			
			$(container).find(':checkbox').mousedown(function(e){
				stop_pop(e);
			});
			
			// mouse up
			$(document).bind('mouseup', function(event){
				
				$(container)[0].setCapture && $(container)[0].releaseCapture();
			
				if(box().css('display') != 'none') {
					var box_offset_top = box().offset().top;
					var box_offset_bottom = box().offset().top + box().height();
					$(container).find(':checkbox').each(function(i,item){
						var offset_top = $(item).offset().top;
						var offset_bottom = $(item).offset().top + $(item).height();
						if (offset_bottom >= box_offset_top && offset_top <= box_offset_bottom) {
							$(item).attr('checked',true);		
						}
					});
				}
				
				box().hide();
				$(container).unbind('mousemove');	
			});		
			// mouse down
			$(container).mousedown(function(event){
				
				event.preventDefault && event.preventDefault(); // 阻止默认行为发生
				
				$(container).find(':checkbox').attr('checked',false);
				
				var startPos = {
					top: event.clientY + $(document).scrollTop(), 
					left: event.clientX + $(document).scrollLeft()
				};

				this.setCapture && this.setCapture();	
				// mouse move
				$(container).unbind('mousemove').mousemove(function(event){
					
					document.selection && document.selection.empty(); // for ie 取消选择
					window.getSelection && window.getSelection().removeAllRanges();  // for non ie 取消选择

					var top = event.clientY + $(document).scrollTop();
					var left = event.clientX + $(document).scrollLeft();
					var endPos = {
						top:  Math.max(top,  container.offset().top), 
						left: Math.max(left, container.offset().left)
					};

					var fixedPoint = { // 设置定点
						left: endPos.left > startPos.left ? startPos.left : endPos.left,
						top: endPos.top > startPos.top ? startPos.top : endPos.top
					}; 

					var w = Math.min(Math.abs(endPos.left - startPos.left), container.offset().left + container.width() - fixedPoint.left);
					var h = Math.min(Math.abs(endPos.top - startPos.top), container.offset().top + container.height() - fixedPoint.top);

					box().show().css({left: fixedPoint.left+'px', top: fixedPoint.top+'px', width: w+'px', height: h+'px'});			
				});		
			});
		}

		init();
		return $(this);  
	};

})(jQuery);

 

 花了一个晚上研究出来的一个 jquery 插件， 用鼠标拖拉来选中 checkbox

用鼠标拖拉来选中 checkbox

用法： 在上面的红框里面点击鼠标左键(或右键)，按住不动，移动鼠标 形成选区，再释放鼠标