關於jquery全選反選 批量刪除的一點心得
阿新 • • 發佈:2017-06-22
批量刪除 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全選反選 批量刪除的一點心得