JavaScript 实现 Shift+Click 多选与反选复选框
作者:异步漫步时间:2026-10-29 09:11:05浏览:134
本文介绍利用 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 编程实践有所帮助。
作者最新文章
D3.js 比例尺与坐标轴的配置详解
2026-11-05 16:54:46
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法:concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19
