实现checkbox的多选

checkbox多选

　　技术一般水平有限，有什么错的地方，望大家指正。

　　全选，多选都是为了使用的方便，一般情况下全选就够用了，但是用户要求实现一个多选的功能也没有办法老老实实的做吧。

　　多选的实现也较为简单，首先需要一个遮罩可以标识给用户当前所选择的区域，其次就是选中用户所需要的信息，按照这个思路我们来一步步实现。

遮罩实现

　　我们用一个div来当做遮罩层：

.mask{height:1px;width:1px;position:absolute;background-color:gray;opacity:0.2}

function createMask(){var div = document.createElement("div");div.className = "mask";div.id = "mask";document.body.appendChild(div);
}

　　接下来就是唯一需要注意的地方就是遮罩的大小的变化，遮罩是用一个div来实现，所以需要动态的表示出宽高位置来为用户标识出选择的位置：

　　我们把可以移动的区域分成四份（不是个标准的四象限~凑合看），假如原点就是我们鼠标按下时的位置。

　　当我们在A象限拖动时这是最正常的一种情况，鼠标按下时的点就是遮罩的左上角那个点，宽高就是鼠标运动时的坐标减去鼠标按下时的坐标。

　　当在B象限拖动时，我们拖动的方向是左下方，此时鼠标按下时的点就是遮罩的右上角，决定遮罩大小的点就是我们鼠标移动时的点和鼠标按下时的点之间的距离，这个很好计算出来，在有了遮罩的大小之后最重要的就是决定遮罩的位置，我们要明白不管遮罩怎么移动决定它的位置的都是左上角那个点。当在B象限移动时moveY>downY,moveX<downX,所以此时遮罩的宽：downX-moveX，高：moveY-downY，左上角的点为moveX,downY。

　　当在C象限拖动时，此时moveX<downX,moveY<downY，此时鼠标按下的位置作为遮罩的右下角，遮罩的左上角的点为moveX,moveY,宽：downX-moveX,高：downY-moveY。

　　当在D象限移动时，此时moveX>downX,moveY<downY，此时遮罩的左上角的点为：downX,moveY，宽：downX-moveX，高：downY-moveY。

　　在屏幕中间按下鼠标向周围移动查看效果。

选中实现

　　这个较为简单，记录鼠标按下时的坐标，记录鼠标松开时的坐标，两个点决定的矩形区域内的checkbox选中即可(一个demo)。

　　downX,downY为鼠标按下死的坐标，upX,upY为鼠标松开是的坐标，moveX,moveY为鼠标移动时的坐标。

      //禁止左键选中$(document).bind("selectstart",function(){return false;})$(document).mousedown(function(e){var downX = e.pageX;var downY = e.pageY;　　　　　　createMask();$(this).bind("mousemove",function(e){var moveX = e.pageX;var moveY = e.pageY;var mask = $("#mask");mask.css({"width":moveX-downX+"px","height":moveY-downY+"px"})if(moveX<downX&&moveY>downY){//在B内mask.css({"left":moveX+"px","top":downY+"px","width":downX-moveX+"px","height":moveY-downY+"px"})}else if(moveX<downX&&moveY<downY){//在C内mask.css({"left":moveX+"px","top":moveY+"px","width":downX-moveX+"px","height":downY-moveY+"px"})}else if(moveX>downX&&moveY<downY){//在D内mask.css({"left":downX+"px","top":moveY+"px","width":moveX-downX+"px","height":downY-moveY+"px"})}else{//在A内mask.css({"left":downX+"px","top":downY+"px","width":moveX-downX+"px","height":moveY-downY+"px"})}})$(this).bind("mouseup",function(e){var upX = e.pageX;var upY = e.pageY;var doms = $("input");downX>upX&&changeX();downY>upY&&changeY();for(var i=0,il=doms.length;i<il;i++){var c = $(doms[i]);var p = c.position();var top = p.top;var left = p.left;if(top>=downY&&top<=upY&&left>=downX&&left<=upX){c.prop("checked",!c.prop("checked"));}}$(this).unbind("mousemove");$(this).unbind("mouseup");$("#mask").remove();function changeY(){var c;c = downY;downY = upY;upY = c;}function changeX(){var c;c = downX;downX = upX;upX = c;}}.bind(this))})function createMask(){var div = $("<div id='mask' class='mask'></div>");$("body").append(div);}

　　计算checkbox的位置如果有父级元素要使用ele.offset().top/ele.offset().left来计算当前的位置。

　　基本思路就是这样，可根据实际需求做一些改造，比如按下ctrl才开始这个功能，为了使用方便也可以封装成一个方法。

转载于:https://www.cnblogs.com/shinhwazt/p/6017677.html

实现checkbox的多选相关推荐

实现checkbox的全选和取消
如果点击全选就把所有选项全选上,这个我们常用... View Code 1 <script type="text/javascript"> 2 /*实现checkbox ...
在项目中学习.NET的JQuery CheckBox方法(全选、取消全选、其他）
一.在项目中遇到的CheckBox的全选和取消全选以及其他等解决方案如下: // 对全选和取消全选的事件 $("#CheckAll").click(function () { ...
JS如何控制checkbox的全选反选
JS代码: 1 <script language="javascript" type="text/javascript"> 2 3 //转载请保留出 ...
jQuery实现checkbox的全选反选方法
checkbox的全选.取消全选.选中所有奇数.选中所有偶数等方法的实现代码如下: 注意jQuery的版本:jQuery1.6增加了prop,1.6之前的还是使用attr()和removeAttr() ...
ASPxGridView 结合CheckBox实现多选（在后台事件代码控制）
本篇介绍:ASPxGridView 结合CheckBox实现多选 ,实质跟gridview是一样的:遍历ASPxGridView 找到每行的CheckBox,让后做处理.不过ASPxGridView ...
JQuery全选反选随其他checkbox自动勾选全选反选
工作中的代码片段写出来留作以后对比参考网上没找到自己想要的全选反选代码干脆自己写了个比较臃肿的相信还有更加简单的方法 jquery代码 ============================ ...
微信小程序checkbox的全选以及所有checkbox选中之后的全选
微信小程序checkbox的全选以及所有checkbox选中之后的全选微信小程序checkbox的全选以及所有checkbox选中之后的全选第一次写,软件都不懂,直接把代码拷过来了模板 WXML ...
JQuery实现复选框CheckBox的全选、反选、提交操作
对复选框最基本的应用,就是对复选框进行全选.反选和提交等操作.复杂的操作需要与选项挂钩,来达到各种级联反应效果. [示例]使用Jquery实现复选框CheckBox的全选.反选.提交操作. (1)创建 ...
Android高级控件（一）——ListView绑定CheckBox实现全选，增加和删除等功能
Android高级控件(一)--ListView绑定CheckBox实现全选,增加和删除等功能这个控件还是挺复杂的,也是项目中应该算是比较常用的了,所以写了一个小Demo来讲讲,主要是自定义adap ...
ListView中嵌套checkbox实现多选
我现在要实现一个多选的ListView,当选择ListView中的checkbox的时候,可以将选中的多个checkbox所代表的值保存到数据库中!哪位高手做过类似的东西,给小弟指教指教,十分感谢! ...

实现checkbox的多选

实现checkbox的多选相关推荐

最新文章

热门文章