java checkbox 多选_[Java教程]实现checkbox的多选

[Java教程]实现checkbox的多选

0

2016-11-01 00:00:05

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象限拖动时这是最正常的一种情况