1. 程式人生 > >關於jquery全選反選 批量刪除的一點心得

關於jquery全選反選 批量刪除的一點心得

批量刪除 rem cnblogs success 需要 rip 多說 reac ==

廢話不多說直接上代碼:

下面是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循環盡情的做你想做的一切吧!

關於jquery全選反選 批量刪除的一點心得