JS怎么實(shí)現(xiàn)復(fù)選框的全選和批量刪除功能

這篇文章將為大家詳細(xì)講解有關(guān)JS怎么實(shí)現(xiàn)復(fù)選框的全選和批量刪除功能，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

如圖示：

功能描述：在勾選了全選時(shí)，所有的商品都會(huì)勾選，在取消全選時(shí)，取消所有物品的勾選。如果點(diǎn)擊批量刪除，刪除所勾選的商品。

<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;
 }
 }

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

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

代碼如下：

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

//批量刪除
 function delAllProduct(){
 if(!confirm("確定要?jiǎng)h除這些圖書嗎？")){
 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;
 }

關(guān)于“JS怎么實(shí)現(xiàn)復(fù)選框的全選和批量刪除功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。