快捷導(dǎo)航

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

更新時(shí)間：2017年04月05日 14:30:22 作者：甄情

本文主要介紹了JS實(shí)現(xiàn)復(fù)選框的全選和批量刪除功能的方法代碼。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧

如圖示：

這里寫(xiě)圖片描述

功能描述：在勾選了全選時(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)系。無(wú)意中發(fā)現(xiàn)復(fù)選框組件中有一個(gè)value的值，我可以把商品的編號(hào)賦值給value，然后在批量刪除時(shí)獲得value的值，通過(guò)get請(qǐng)求傳送給servlet。成功解決了這個(gè)問(wèn)題。

代碼如下：

<td style="CURSOR: hand; HEIGHT: 22px" align="center"
 width="23">
 <input type="checkbox" name="check" value="${book.id}"/> 
</td>

//批量刪除
 function delAllProduct(){
 if(!confirm("確定要?jiǎng)h除這些圖書(shū)嗎？")){
 return ;
 }
 var cks=document.getElementsByName("check");
 var str="";
 //拼接所有的圖書(shū)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;
 }

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

21個(gè)值得收藏的Javascript技巧
在本文中列出了21個(gè)值得收藏的Javascript技巧,在實(shí)際工作中,如果能適當(dāng)運(yùn)用,則大大提高工作效率
2014-02-02
將Sublime Text 3 添加到右鍵中的簡(jiǎn)單方法
下面小編就為大家分享一篇將Sublime Text 3 添加到右鍵中的簡(jiǎn)單方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2017-12-12
layUI實(shí)現(xiàn)前端分頁(yè)和后端分頁(yè)
這篇文章主要為大家詳細(xì)介紹了layUI實(shí)現(xiàn)前端分頁(yè)和后端分頁(yè)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-07-07
javascript 動(dòng)態(tài)生成私有變量訪問(wèn)器
創(chuàng)建一個(gè)新的用戶對(duì)象，接受一個(gè)有許多屬性的對(duì)象作為參數(shù)
2009-12-12
js手寫(xiě)貪吃蛇游戲?qū)嵗创a
這篇文章主要給大家介紹了關(guān)于js手寫(xiě)貪吃蛇游戲的相關(guān)資料,貪吃蛇游戲是一款經(jīng)典的游戲,在很多平臺(tái)上都有出現(xiàn),文中給出了詳細(xì)源代碼,需要的朋友可以參考下
2023-09-09
微信小程序購(gòu)物商城系統(tǒng)開(kāi)發(fā)系列-工具篇的介紹
這篇文章主要介紹了微信小程序購(gòu)物商城系統(tǒng)開(kāi)發(fā)系列-工具篇的介紹,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2016-11-11
原生JavaScript實(shí)現(xiàn)簡(jiǎn)單的圖形驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了如何利用原生JavaScript實(shí)現(xiàn)簡(jiǎn)單的圖形驗(yàn)證碼,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以參考下
2023-11-11
Javascript實(shí)現(xiàn)圖片輪播效果(二)圖片序列節(jié)點(diǎn)的控制實(shí)現(xiàn)
這篇文章主要介紹了Javascript實(shí)現(xiàn)圖片輪播效果(二)圖片序列節(jié)點(diǎn)的控制實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下
2016-02-02
javascript返回頂部的按鈕實(shí)現(xiàn)方法
這篇文章主要介紹了javascript返回頂部的按鈕實(shí)現(xiàn)方法,需要的朋友可以參考下
2016-01-01
用js實(shí)現(xiàn)圖片旋轉(zhuǎn)的兩種方案
這篇文章主要給大家介紹了關(guān)于用js實(shí)現(xiàn)圖片旋轉(zhuǎn)的兩種方案, 旋轉(zhuǎn)的效果就是根據(jù)鼠標(biāo)的的移動(dòng)距離來(lái)顯示不同的圖片,形成視覺(jué)差,仿佛就是在正真的旋轉(zhuǎn),需要的朋友可以參考下
2023-07-07