论坛首页 Web前端技术论坛

shift 或 鼠标右键批量选取

浏览 2535 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2009-05-22  
该插件主要运用于有大量 "checkbox" 的地方。。。。

可以快速方便的  选取 "checkbox"

个人感觉功能还是比较强大的。。。兼容所有浏览器。。经我测试暂无bug

详情请查看  附件
   发表时间:2009-05-23  
有时间请补充说明文档,打开demo.html 使用还看不出有什么作用
0 请登录后投票
   发表时间:2009-05-23  
zlt2000 写道
有时间请补充说明文档,打开demo.html 使用还看不出有什么作用


一般情况下的input[checkbox]   要多选几个不是  都要每个去点,或者点全选反选按钮

而这个控件就是补充    这个地方。放选取更加方便

你可以按住    shift 来左键点击checkbox 来选取多个  或者   用右键来代替  shift和checkbox的组合

选取规则是这样的。。

checkbox有同样的name时

1. 按住shift 或用右键时,  会启动这个控件,
       控件会自动记录你第一次(或上一次)点击的位置
2.当你点击下一个时,有根据这次点击checkbox的    默认状态   来进行批量选取

第一类情况
******************************************
比如有4个checkbox:

demo1
demo2
demo3
demo4

step1: 点击demo2 -- demo2被选中

step3: 按住shift 点击demo4(这时的demo4 是未选中的) -- demo2,demo3,demo4  都会被选中。

step4: 按住shift 点击demo1(这时的demo1 是未选中的) -- 4个checkbox 都会被选中。

step5: 当再次 按住shift 点击demo4(选中状态) --  4个checkbox 都会被取消选中状态

*********************************************

情况2:

demo1
demo2
demo3
demo4
demo5
demo6
demo7

step1: 点击demo1,再shift 点击demo3 -- demo1,demo2,demo3 被选中
step2: 松开shift 点击demo5 再 按住shift 点击demo7 -- demo5,demo6, demo7 被选中

step3: 按住shift 点击demo3 -- 从demo7 到demo3 都被取消选中状态

****************************************************************************

总结下:    简单的说,控件会记录你上一次点击checkbox 的位置, 判断当前点击的checkbox 位置并且判断当前点击这个checkbox 的状态,根据该checkbox 来进行批量选择或取消选择 这2个checkbox 之间的所有checkbox
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics