必优博客

面对大量多选框，一个一个选，相信会很单调和乏味，能不能结合一下Ctrl和Shift键，快速多选与反选，这里介绍一个jQuery插件Shiftcheckbox可实现此功能，接Shift键可连续多选，基本上类似于这样的介绍，必优相信大家应该都很明白，Shiftcheckbox插件使用简单，效果图如下：

使用说明
需要使用jQuery库文件和Shiftcheckbox库文件[在线演示][下载]
必优推荐级别：★★★
使用实例
一，包含文件部分

1. <script type="text/javascript" src="jquery-1.3.2.js"></script>
2. <script type="text/javascript" src="jquery.shiftcheckbox.js"></script>

二，HTML部分

1. <fieldset style="width: 15%">
2. <input type="checkbox" name="rating[]" value="1" class="input shiftCheckbox" />1<br />
3. <input type="checkbox" name="rating[]" value="2" class="input shiftCheckbox" />2<br />
4. <input type="checkbox" name="rating[]" value="3" class="input shiftCheckbox" />3<br />
5. <input type="checkbox" name="rating[]" value="4" class="input shiftCheckbox" />4<br />
6. <input type="checkbox" name="rating[]" value="5" class="input shiftCheckbox" />5<br />
7. <input type="checkbox" name="rating[]" value="6" class="input shiftCheckbox" />6<br />
8. <input type="checkbox" name="rating[]" value="7" class="input shiftCheckbox" />7<br />
9. <input type="checkbox" name="rating[]" value="8" class="input shiftCheckbox" />8<br />
10. <input type="checkbox" name="rating[]" value="9" class="input shiftCheckbox" />9<br />
11. <input type="checkbox" name="rating[]" value="10" class="input shiftCheckbox" />10<br />
12. <input type="checkbox" name="rating[]" value="11" class="input shiftCheckbox" />11<br />
13. <input type="checkbox" name="rating[]" value="12" class="input shiftCheckbox" />12<br />
14. <input type="checkbox" name="rating[]" value="13" class="input shiftCheckbox" />13<br />
15. </fieldset>

三，Javascript部分

1. <script type="text/javascript">
2. $(document).ready (
3. function () {
4. $('.shiftCheckbox').shiftcheckbox();
5. });
6. </script>

如上实例，直接使用shiftcheckbox插件，只需要指定获取实现的对象，如上对于类名为shiftCheckbox的多选框实现按Shift多选或反选功能。

基本上使用比较简单，大家可查看一下具体的JS实现机制。

今天杭州的气温突破38度，天气热，人就懒！冒办法的！

点我下载Shiftcheckbox源程序
http://jquerycodes.googlecode.com/files/jquery.shiftcheckbox.rar