监听window键盘的事件:
(如监听shift按下)(keydown,keyCode)
//定义全局变量,监听键盘的shift是否被按下,shift对应的码是16
var flag=false;
//注意是window对象,e是事件本身
$(window).on("keydown",function (e) {
if(e.keyCode === 16){
falg=true;
}
});
#--按住shift进行批量操作示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1px">
<thead>
<tr>
<th>选择</th>
<th>姓名</th>
<th>功能</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>林同学</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">注销</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>陈同学</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">注销</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>李同学</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">注销</option>
</select>
</td>
</tr>
</tbody>
</table>
<input type="button" id="b1" value="全选">
<input type="button" id="b2" value="取消">
<input type="button" id="b3" value="反选">
<script src="jquery-3.4.1.min.js"></script>
<script>
//全选按钮事件
$("#b1").on("click",function () {
$(":checkbox").prop("checked",true);
});
//取消按钮事件
$("#b2").on("click",function () {
$(":checkbox").prop("checked",false);
});
//反选按钮事件
$("#b3").on("click",function () {
//找到所有的checkbox,而this是DOM对象,注意转为JQuery对象,然后为每一个checkbox修改与其本身相反的checked的值
$(":checkbox").each(function () {
console.log(this);
var flags=$(this).prop("checked");
$(this).prop("checked",!flags);
});
});
//按住shift批量操作
//定义全局变量,监听键盘的shift是否被按下,shift对应的码是16
var flag=false;
//监听键盘,注意是window对象,e是事件本身
$(window).on("keydown",function (e) {
if(e.keyCode === 16){
flag=true;
}
});
$(window).on("keyup",function (e) {
if(e.keyCode === 16){
flag=false;
}
});
//select绑定change事件
$("table select").on("change",function () {
//根据flag的true,false判断是否批量操作,还需要判断checkbox是否被选中
if(flag){
var selectValue=$(this).val(); //this为修改的select值,val获取的是option标签中的value值,而传进去这个值时,会对应的修改为这个值对应的内容
//找到所有checkbox被选中的那一行select,选中指定值
$("input:checked").parent().parent().find("select").val(selectValue);
}
});
</script>
</body>
</html>