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>
原文地址:https://www.cnblogs.com/god-for-speed/p/11587261.html