python之JQuery(批量操作,监听按键)
监听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>