洛小依

jQuery、html、JavaScript实现全选、反选、批量删除
<script type="text/javascript"> /...
扫描右侧二维码阅读全文
25
2019/03

jQuery、html、JavaScript实现全选、反选、批量删除

<script type="text/javascript">
        //全选的功能
        function allcheck(){
            //先得到所有的checkbox
            var ck=document.getElementsByName("ck");//得到一组checkbox  相当于数组
            //循环这一组checkbox让每一个checkbox选中
            for(var i=0;i<ck.length;i++){
                var c=ck[i];//得到一个checkbox
                c.checked=true;//true代表选中
            }
        }
        
        //全不选
        function allnotcheck(){
            //先得到所有的checkbox
            var ck=document.getElementsByName("ck");//得到一组checkbox  相当于数组
            //循环这一组checkbox让每一个checkbox选中
            for(var i=0;i<ck.length;i++){
                var c=ck[i];//得到一个checkbox
                c.checked=false;//false代表不选
            }
        }
        //反选
        function backcheck(){//先得到所有的checkbox
            var ck=document.getElementsByName("ck");//得到一组checkbox  相当于数组
            //循环这一组checkbox让每一个checkbox选中
            for(var i=0;i<ck.length;i++){
                var c=ck[i];//得到一个checkbox
                if(c.checked==true){//如果当前的checkbox是选中的则不让其选中
                    ck[i].checked=false;
                }else{
                    ck[i].checked=true;
                }
            }
        }
        
        //批量删除
        function alldel(){
            var f=false;
            //得到要删除的主键id
            var arr=[];//用于存要删除的选中的id值
            
            var ck=document.getElementsByName("ck");//得到一组checkbox  相当于数组
            //循环这一组checkbox让每一个checkbox选中
            for(var i=0;i<ck.length;i++){
                if(ck[i].checked==true){//代表选中
                    arr.push(ck[i].value);
                    f=true;
                }
            }
            
            //alert(arr);
            //跳到删除的servlet里去
            if(f==true){
                if(confirm("您确认要删除吗?"))
                    location.href="servlet/DelServlet?ids="+arr;
            }else{
                layer.alert("请至少选中一条进行批量删除");
            }
        }
    </script>

  </head>
  
  <body>
    <center>
    <input type="radio" id="allcheck" name="allcheck" onclick="allcheck();"/>全选  
    <input type="radio" id="allnotcheck" name="allcheck"  onclick="allnotcheck();"/>全不选  
    <input type="radio" id="backcheck" name="allcheck"  onclick="backcheck();"/>反选  
    <a href="javascript:void(0);" onclick="alldel();">批量删除</a>
    <br/>
        <table border="1">
            <tr>
                <td></td>
                <td>序号 </td>
                <td>姓名</td>
                <td>邮箱 </td>
                <td>密码 </td>
            </tr>
            
                <tr>
                    <td>
                        <input type="checkbox" name="ck" value=""/>
                    </td>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
            
        
        </table>
        
    </center>
  </body>
</html>

最后修改:2019 年 04 月 16 日 03 : 38 PM
如果觉得我的文章对你有用,请随意赞赏

发表评论

1 条评论

  1. 文娱帝国

    写的很好,很喜欢