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

廢話不多說直接上代碼：

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

 

批量刪除的話用 where in 語句比較合適：

    <update id="deleteAll" parameterType="java.util.Arrays">

    UPDATE test_data SET 
    del_flag = 1
    where id in

    <foreach item="idItem" collection="array" open="(" separator=","
      close=")">

      #{idItem}

    </foreach>

  </update>