JavaScript 实现 Shift+Click 多选与反选复选框

作者:异步漫步

时间:2026-10-29

浏览:133

本文介绍利用 JavaScript 结合 jQuery 实现复选框的多选与反选功能。通过监听 click 事件,检测 Shift 键状态,计算选中范围并批量修改 checked 属性,从而支持用户按住 Shift 键进行连续选择或反向选择操作。

文章目录

JavaScript 实现 Shift+Click 多选与反选复选框

本文介绍一种基于 JavaScript 实现复选框多选与反选功能的具体方法,供开发者参考。


var lastChecked = null;
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.
}
$('input[type=checkbox]').click(handleChecked);

希望上述内容对您的 JavaScript 编程实践有所帮助。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章