JS怎么實現復選框的全選和批量刪除功能

這篇文章將為大家詳細講解有關JS怎么實現復選框的全選和批量刪除功能，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

如圖示：

功能描述：在勾選了全選時，所有的商品都會勾選，在取消全選時，取消所有物品的勾選。如果點擊批量刪除，刪除所勾選的商品。

<td align="center" width="12%" >
 <input type="checkbox" id="allChecks" onclick="ckAll()" /> 全選/全不選
</td>

//全選
 function ckAll(){
 var flag=document.getElementById("allChecks").checked;
 var cks=document.getElementsByName("check");
 for(var i=0;i<cks.length;i++){
 cks[i].checked=flag;
 }
 }

如代碼所示，全選/全不選的復選框添加onclick事件。每當點擊了這個復選框時，觸發ckAll事件。在ckAll()方法中，我們首先獲得allChecks當前的勾選狀態，然后將其賦值為其它商品的復選框即可。這一步實現很簡單。復雜的是如何實現商品的批量刪除。

起初我一直在想，復選框只是一個組件，到底怎么才能和商品的編號（主鍵）有關系。無意中發現復選框組件中有一個value的值，我可以把商品的編號賦值給value，然后在批量刪除時獲得value的值，通過get請求傳送給servlet。成功解決了這個問題。

代碼如下：

<td  align="center"
 width="23">
 <input type="checkbox" name="check" value="${book.id}"/> 
</td>

//批量刪除
 function delAllProduct(){
 if(!confirm("確定要刪除這些圖書嗎？")){
 return ;
 }
 var cks=document.getElementsByName("check");
 var str="";
 //拼接所有的圖書id
 for(var i=0;i<cks.length;i++){
 if(cks[i].checked){
 str+="id="+cks[i].value+"&";
 }
 }
 //去掉字符串末尾的‘&'
 str=str.substring(0, str.length-1);
 location.href="${pageContext.request.contextPath}/servlet/delAllBooksServlet?" rel="external nofollow" +str;
 }

關于“JS怎么實現復選框的全選和批量刪除功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。