JavaScript使用Shift+Click实现复选框连续选择与反选

实现逻辑与目标

在处理包含多个复选框的表单时，用户通常期望按住 Shift 键并点击某个复选框时，能够选中从“上一次点击的项”到“当前点击项”之间的所有复选框。如果前一个状态是选中，则中间所有项都选中；反之则全部取消选中。

准备工作

1. 引入 jQuery：为了简化 DOM 操作和选择器匹配，示例代码使用了 jQuery。确保页面中已加载兼容版本的 jQuery 库。
2. HTML 结构：页面上存在一组类型为 checkbox 的输入元素。

第1步：定义全局变量

目的：记录用户上一次点击的复选框元素，以便计算选中范围。

var lastChecked = null;

第2步：编写核心处理函数

目的：监听点击事件，判断是否按下 Shift 键，并执行相应的勾选或取消逻辑。

入口：绑定到所有 checkbox 元素的 click 事件。

• 动作：

1. 检查事件对象 e 是否包含 shiftKey，且存在 lastChecked 变量。
2. 获取当前点击项和目标项在 checkbox 列表中的索引位置。i 为上一次的位置，j 为当前位置。
3. 根据索引大小关系，筛选中间的复选框集合：
   - 若 j > i，选中范围是 i 之后、j-i 长度内的元素。
   - 若 i > j，选中范围是 j 之后、i-j 长度内的元素。
4. 判断当前点击的目标元素是否处于选中状态：
   - 未选中：调用 removeAttr('checked') 取消所有中间项的勾选。
   - 已选中：调用 attr('checked', 'checked') 勾选所有中间项。

var handleChecked = function(e) {
 if(lastChecked && e.shiftKey) {
  var i = $('input[type="checkbox"]').index(lastChecked);
  var j = $('input[type="checkbox"]').index(e.target);
  var checkboxes = [];
  
  // 根据点击顺序确定范围
  if (j > i) {
   checkboxes = $('input[type="checkbox"]:gt('+ (i-1) +'):lt('+(j-i)+')');
  } else {
   checkboxes = $('input[type="checkbox"]:gt('+ j +'):lt('+ (i-j) +')');
  }
  
  // 根据目标元素的状态决定全选还是全不选
  if (!$(e.target).is(':checked')) {
   $(checkboxes).removeAttr('checked');
  } else {
   $(checkboxes).attr('checked', 'checked');
  }
 }
 lastChecked = e.target;
 // Other click action code.
}

第3步：绑定事件监听

目的：将上述函数应用于页面上的所有复选框。

$('input[type=checkbox]').click(handleChecked);

完成判断

保存代码并在浏览器中预览页面。尝试按住 Shift 键并依次点击不同的复选框。如果成功选中或取消了两个点击点之间的所有相关复选框，则实现成功。

简要总结

以上就是利用 JavaScript 实现 Shift+Click 批量选择与反选复选框的详细内容。该技巧适用于管理后台、邮箱收件箱等需要高效多选的界面场景。更多关于 JavaScript 交互效果优化的资料请关注本站其它相关文章！