欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2017年04月05日 14:30:22   作者：甄情  
本文主要介紹了JS實(shí)現(xiàn)復(fù)選框的全選和批量刪除功能的方法代碼。具有很好的參考價(jià)值。下面跟著小編一起來看下吧

如圖示：

這里寫圖片描述

功能描述：在勾選了全選時(shí)，所有的商品都會勾選，在取消全選時(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)擊了這個復(fù)選框時(shí)，觸發(fā)ckAll事件。在ckAll()方法中，我們首先獲得allChecks當(dāng)前的勾選狀態(tài)，然后將其賦值為其它商品的復(fù)選框即可。這一步實(shí)現(xiàn)很簡單。復(fù)雜的是如何實(shí)現(xiàn)商品的批量刪除。

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

代碼如下：

<td style="CURSOR: hand; HEIGHT: 22px" 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;
 }

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

相關(guān)文章

  • JS實(shí)現(xiàn)帶關(guān)閉功能的阿里媽媽網(wǎng)站頂部滑出banner工具條代碼

    JS實(shí)現(xiàn)帶關(guān)閉功能的阿里媽媽網(wǎng)站頂部滑出banner工具條代碼

    這篇文章主要介紹了JS實(shí)現(xiàn)帶關(guān)閉功能的阿里媽媽網(wǎng)站頂部滑出banner工具條代碼,可實(shí)現(xiàn)頂部banner窗口的浮動顯示及關(guān)閉隱藏功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-09-09
  • 用JS實(shí)現(xiàn)貪吃蛇小游戲

    用JS實(shí)現(xiàn)貪吃蛇小游戲

    這篇文章主要為大家詳細(xì)介紹了用JS實(shí)現(xiàn)貪吃蛇小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-01-01
  • 微信小程序?qū)崿F(xiàn)帶滑塊的進(jìn)度條

    微信小程序?qū)崿F(xiàn)帶滑塊的進(jìn)度條

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)帶滑塊的進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-06-06
  • js 關(guān)鍵詞高亮(根據(jù)ID/tag高亮關(guān)鍵字)案例介紹

    js 關(guān)鍵詞高亮(根據(jù)ID/tag高亮關(guān)鍵字)案例介紹

    關(guān)鍵詞高亮在開發(fā)中會帶來很多的方便，關(guān)鍵詞高亮包括:根據(jù)ID高亮關(guān)鍵字/根據(jù)Tag名高亮關(guān)鍵字等等，感興趣的朋友可以了解下，希望本文對你有所幫助
    2013-01-01
  • JavaScript函數(shù)內(nèi)部屬性和函數(shù)方法實(shí)例詳解

    JavaScript函數(shù)內(nèi)部屬性和函數(shù)方法實(shí)例詳解

    函數(shù)是由事件驅(qū)動的或者當(dāng)它被調(diào)用時(shí)執(zhí)行的可重復(fù)使用的代碼塊。通過本文給大家介紹JavaScript函數(shù)內(nèi)部屬性和函數(shù)方法，感興趣的朋友一起學(xué)習(xí)吧
    2016-03-03
  • JavaScript實(shí)現(xiàn)標(biāo)題欄文字輪播效果代碼

    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指向問題詳解

    JavaScript This指向問題詳解

    這篇文章主要介紹了JavaScript This指向問題詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-11-11
  • 利用webpack理解CommonJS和ES Modules的差異區(qū)別

    利用webpack理解CommonJS和ES Modules的差異區(qū)別

    這篇文章主要介紹了利用webpack理解CommonJS和ES Modules的差異區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-06-06
  • JS使用canvas繪制旋轉(zhuǎn)風(fēng)車動畫

    JS使用canvas繪制旋轉(zhuǎn)風(fēng)車動畫

    這篇文章主要為大家詳細(xì)介紹了JS使用canvas繪制旋轉(zhuǎn)風(fēng)車動畫，有加速減速啟動停止功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-02-02
  • 28個常用JavaScript方法集錦

    28個常用JavaScript方法集錦

    本文給大家匯總介紹了28個常用的javascript方法，十分的全面，都是本人精心整理的，這里推薦給大家，有需要的小伙伴直接帶走。
    2015-01-01

最新評論