JS實(shí)現(xiàn)復(fù)選框的全選和批量刪除功能
如圖示：
功能描述：在勾選了全選時(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í)也希望多多支持腳本之家！
- JS實(shí)現(xiàn)CheckBox復(fù)選框全選、不選或全不選功能
- JS實(shí)現(xiàn)CheckBox復(fù)選框全選全不選功能
- js與jQuery實(shí)現(xiàn)checkbox復(fù)選框全選/全不選的方法
- js實(shí)現(xiàn)復(fù)選框的全選和取消全選效果
- js html css實(shí)現(xiàn)復(fù)選框全選與反選
- javaScript實(shí)現(xiàn)復(fù)選框全選反選事件詳解
- javascript 復(fù)選框選擇/全選后特效
- JS中如何實(shí)現(xiàn)復(fù)選框全選功能
- 基于JavaScript實(shí)現(xiàn)復(fù)選框的全選和取消全選
- JavaScript實(shí)現(xiàn)復(fù)選框全選或全取消操作
相關(guān)文章
JS實(shí)現(xiàn)帶關(guān)閉功能的阿里媽媽網(wǎng)站頂部滑出banner工具條代碼
這篇文章主要介紹了JS實(shí)現(xiàn)帶關(guān)閉功能的阿里媽媽網(wǎng)站頂部滑出banner工具條代碼,可實(shí)現(xiàn)頂部banner窗口的浮動(dòng)顯示及關(guān)閉隱藏功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
這篇文章主要為大家詳細(xì)介紹了用JS實(shí)現(xiàn)貪吃蛇小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)帶滑塊的進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
js 關(guān)鍵詞高亮(根據(jù)ID/tag高亮關(guān)鍵字)案例介紹
關(guān)鍵詞高亮在開(kāi)發(fā)中會(huì)帶來(lái)很多的方便，關(guān)鍵詞高亮包括:根據(jù)ID高亮關(guān)鍵字/根據(jù)Tag名高亮關(guān)鍵字等等，感興趣的朋友可以了解下，希望本文對(duì)你有所幫助2013-01-01
JavaScript函數(shù)內(nèi)部屬性和函數(shù)方法實(shí)例詳解
函數(shù)是由事件驅(qū)動(dòng)的或者當(dāng)它被調(diào)用時(shí)執(zhí)行的可重復(fù)使用的代碼塊。通過(guò)本文給大家介紹JavaScript函數(shù)內(nèi)部屬性和函數(shù)方法，感興趣的朋友一起學(xué)習(xí)吧2016-03-03
JavaScript實(shí)現(xiàn)標(biāo)題欄文字輪播效果代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)標(biāo)題欄文字輪播效果代碼,涉及JavaScript基于時(shí)間函數(shù)及流程控制操作標(biāo)題欄文字的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了JavaScript This指向問(wèn)題詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
利用webpack理解CommonJS和ES Modules的差異區(qū)別
這篇文章主要介紹了利用webpack理解CommonJS和ES Modules的差異區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
JS使用canvas繪制旋轉(zhuǎn)風(fēng)車(chē)動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了JS使用canvas繪制旋轉(zhuǎn)風(fēng)車(chē)動(dòng)畫(huà)，有加速減速啟動(dòng)停止功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
本文給大家匯總介紹了28個(gè)常用的javascript方法，十分的全面，都是本人精心整理的，這里推薦給大家，有需要的小伙伴直接帶走。2015-01-01