关于jquery全选反选 批量删除的一点心得

Posted 2020-09-24 陈扬天

废话不多说直接上代码：

下面是jsp页面的html代码：

<table id="contentTable" class="">
        <thead>
            <tr> 
            <th><input type="checkbox" id="All" value="全选/全不选" />全选/全不选</th> 
            </tr>
        </thead>
        <tbody>
        <c:forEach items="${page.list}" var="advAdvertisement">
            <tr>
                <td><input type="checkbox" value="${advAdvertisement.id}" name="checkbox" class="checkbox"/></td>
            </tr>
        </c:forEach>
        </tbody>
    </table>

然后是jquery:

 
        $(document).ready(function(){
            
            $(‘#All‘).change(function(){
                
            if($(‘#All‘).attr(‘checked‘)){
            
                $(‘.checkbox‘).attr(‘checked‘,true);
                
            }else{
                $(‘.checkbox‘).removeAttr(‘checked‘);
            }
                
            });
        });

 

代码简单明了，相信聪明的你一看就懂。

最后是批量删除选中的复选框数据：

<input id="btnSubmit" class="" onclick="deleteAll();" type="button" value="批量删除"/>

<script type="text/javascript">
        
        function deleteAll(){
            if(confirm(‘确认要删除选中的广告吗?‘)==true){
                
            var obj=document.getElementsByName(‘checkbox‘); //选择所有name="‘test‘"的对象，返回数组 
            //取到对象数组后，我们来循环检测它是不是被选中 
            var s=new Array(); 
            for(var i=0; i<obj.length; i++){ 
            if(obj[i].checked){
                s[i]=obj[i].value;
            } //如果选中，将value添加到数组s中 
            } 
            //那么现在来检测s的值就知道选中的复选框的值了 
            alert(s==‘‘?‘你还没有选择任何内容！‘:s);
            alert(s);
            $.ajax({
                  type:‘POST‘,
                  url:‘${ctx}/adv/advAdvertisement/deleteAll‘,
                  data:{‘ids‘:s},
                  traditional:true,
                  dataType:‘text‘,
                  success:function(data){alert(‘删除成功！‘)}
            });
            window.location.href="";
            }
        }
    </script>

批量删除的时候需要去获取每一个被选中的复选框的id，我们用一个数组把他们存起来，最重要的一点，是要在$.ajax中配置traditional:true这个属性，如果不配置后台controller是不认可的。

 

后台接收的话直接用一个String[] ids数组接收就可以得到关于id的一个数组了,然后for循环尽情的做你想做的一切吧！