jQuery實(shí)現(xiàn)checkbox即點(diǎn)即改批量刪除及中間遇到的坑
最近要用jQuery實(shí)現(xiàn)一個(gè)批量刪除操作,效果如下圖
最終頁(yè)面page.html,此頁(yè)面使用了bootstrap和jQuery,如果沒有需要下載一下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>視頻管理</title> <link rel="stylesheet" type="text/css" href="css/init.css" rel="external nofollow" /> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" /> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <style type="text/css"> .head { background-color: #EFEFF4; font-size: 16px; color: black; padding: 20px; font-size: 20px; overflow: hidden; margin-bottom: 10px; } .table { margin-top: 30px; border: 1px solid #CCCCCC; } .name_info { color: red; } .message p { margin: 0px; padding: 0px; } .form_0 { background-color: #EEEEEE; } </style> </head> <body> <div class="container-fluid"> <div id="row" class="head"> <div class="col-sm-12 col-md-12 col-lg-12"> <p>視頻管理</p> </div> </div> <div id="row" class="col-sm-12 col-md-12"> <div class="col-xs-1"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="batchDel" class="btn btn-danger btn">批量刪除 <span class="badge" id="badge_0">0</span></a> </div> <div class="col-xs-1"> <p class="text-danger">刪除成功</p> </div> <div class="col-xs-1"> <a href="speaker_add.html" rel="external nofollow" class="btn btn-primary btn">添加</a> </div> <div id="row" class="col-xs-6 col-md-offset-1"> <form class="form-inline form_0" role="form"> <div class="form-group col-xs-3 col-md-3"> <input type="text" class="form-control" id="name" placeholder="課程名稱"> </div> <div class="form-group col-xs-2 col-md-2"> <select class="form-control btn-primary"> <option>請(qǐng)選擇課程</option> <option>2</option> </select> </div> <div class="form-group col-xs-2 col-md-2"> <select class="form-control btn-primary"> <option>請(qǐng)選擇老師</option> <option>2</option> </select> </div> <div class="form-group col-xs-2 col-md-2"> <button type="submit" class="btn btn-primary">查詢</button> </div> </form> </div> </div> <div class="row"> <div class="col-md-10 col-lg-10"> <table class="table table-striped"> <thead> <tr> <th>選擇</th> <th>序號(hào)</th> <th>名稱</th> <th>介紹</th> <th>講師</th> <th>時(shí)長(zhǎng)</th> <th>播放次數(shù)</th> <th>編輯</th> <th>刪除</th> </tr> </thead> <tbody> <tr> <td> <input class="check_0" value="0" type="checkbox"> </td> <td class="show_id">1</td> <td id="show_name">環(huán)境搭建</td> <td>這視頻真tm牛逼</td> <td>老王</td> <td>666</td> <td>666</td> <td> <a href="video_update.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="edit_submit"><span class="glyphicon glyphicon-pencil"></span>編輯</a> </td> <td> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="delete" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-trash"></span>刪除</a> </td> </tr> <tr> <td> <input class="check_0" value="1" type="checkbox"> </td> <td class="show_id">1</td> <td id="show_name">環(huán)境搭建</td> <td>這視頻真tm牛逼</td> <td>老王</td> <td>666</td> <td>666</td> <td> <a href="video_update.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="edit_submit"><span class="glyphicon glyphicon-pencil"></span>編輯</a> </td> <td> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="delete" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-trash"></span>刪除</a> </td> </tr> <tr> <td> <input class="check_0" value="2" type="checkbox"> </td> <td class="show_id">1</td> <td id="show_name">環(huán)境搭建</td> <td>這視頻真tm牛逼</td> <td>老王</td> <td>666</td> <td>666</td> <td> <a href="video_update.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="edit_submit"><span class="glyphicon glyphicon-pencil"></span>編輯</a> </td> <td> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="delete" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-trash"></span>刪除</a> </td> </tr> </tbody> </table> </div> </div> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">溫馨提示</h4> </div> <div id="info" class="modal-body">你確定要?jiǎng)h除嗎?</div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button> <button type="button" id="delete_submit" class="btn btn-primary">確定</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal --> </div> </div> <form id="form" method="post"> <input type="hidden" name="_method" id="_method" value="DELETE" /> <input type="hidden" name="id" id="id" /> </form> </body> <script type="text/javascript"> $(document).ready(function() { $("#delete").click(function() { var click_name = $(this).parent().siblings("#show_name").html(); var click_id = $(this).parent().siblings("#show_id").html(); $("#info").html("你確定要?jiǎng)h除視頻:<a class='name_info'>" + click_name + "</a>嗎?"); $("#id").val(click_id); }) $("#delete_submit").click(function() { $("#_method").val("DELETE"); $("#form").submit(); }) $("#edit_submit").click(function() { var click_id = $(this).parent().siblings("#show_id").html(); $("#id").val(click_id); $("#form").attr("method", "get"); $("#_method").val("get"); $("#form").submit(); }) //獲取選中的個(gè)數(shù) $(".check_0").click(function() { $("#badge_0").html($("input[type=checkbox]:checked").length); //alert($("input[type = checkbox]: checked ").length); }) //批量刪除 $("#batchDel").click(function() { var params = ""; $("input[type = checkbox]:checked").each(function(index,element){ //第一個(gè)id不需要加前綴 if(index == 0) { params += "id=" + $(this).val(); } else { params += "&id=" + $(this).val(); } }); alert("生成的拼接參數(shù):" + params); }) }) </script> </html>
上圖的操作主要需要兩個(gè)操作:
一、當(dāng)checkBox點(diǎn)擊時(shí)進(jìn)行選中計(jì)數(shù)(帶坑)。
二、當(dāng)點(diǎn)擊批量刪除時(shí),拼接選中單位的id,傳遞給個(gè)后臺(tái)。
初看一下,感覺這些很好實(shí)現(xiàn),并且實(shí)現(xiàn)的方法很多。當(dāng)初我也是這么認(rèn)為的,結(jié)果搞了一個(gè)上午.......,接下來(lái)就看看jQuery的一些坑。
我開始想法是每次點(diǎn)擊checkBox時(shí),對(duì)所有的checkBox進(jìn)行each()遍歷,如果是勾選狀態(tài)就將Num++,最后將num的值賦給批量刪除的數(shù)字小標(biāo)簽,順便把id也拼接了。
$(".check_0").click(function(){ var num=0; var del_str=""; $(".check_0").each(function(){ alert($(this).val()+":"+$(this).attr("checked")); if($(this).attr("checked")=="checked"){ num++; del_str+=$(this).parent().siblings("show_id").html()+"/"; } alert(this.checked); }) })
當(dāng)這段代碼觸發(fā)時(shí),卻發(fā)現(xiàn)一個(gè)詭異的現(xiàn)象:這段代碼會(huì)在勾選效果前先觸發(fā)。類似于beforeClick(),所以當(dāng)代碼遍歷時(shí),無(wú)法獲取當(dāng)前的勾選狀態(tài)。
就這個(gè)問(wèn)題,我在網(wǎng)上找了半天答案,硬是不知道如何解決,什么mouseup()都用了一下,都是beforeClick的效果。
最后我使用了另一種寫法。
//獲取選中的個(gè)數(shù) $(".check_0").click(function() { $("#badge_0").html($("input[type=checkbox]:checked").length); //alert($("input[type = checkbox]: checked ").length); }) //批量刪除 $("#batchDel").click(function() { var params = ""; $("input[type = checkbox]:checked").each(function(index,element){ //第一個(gè)id不需要加前綴 if(index == 0) { params += "id=" + $(this).val(); } else { params += "&id=" + $(this).val(); } }); alert("生成的拼接參數(shù):" + params); })
成功運(yùn)行出效果!
結(jié)論:
在click()中使用input[type=[checkbox]:checked]
選擇器獲得勾選元素時(shí),得到的就是勾選后的結(jié)果afterclick()。
而使用.each()遍歷時(shí),獲取的是勾選前的效果beforeclick。
為什么一個(gè)click函數(shù)里,能得出beforeclick和aferclick兩種效果?
坑哭......
總結(jié)
以上所述是小編給大家介紹的jQuery實(shí)現(xiàn)checkbox即點(diǎn)即改批量計(jì)數(shù)及中間遇到的坑,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)歡迎各我留言,小編會(huì)及時(shí)回復(fù)大家的!
- tp5修改(實(shí)現(xiàn)即點(diǎn)即改)
- PHP+jQuery實(shí)現(xiàn)即點(diǎn)即改功能示例
- JavaScript中全選、全不選、反選、無(wú)刷新刪除、批量刪除、即點(diǎn)即改入庫(kù)(在yii框架中操作)的代碼分享
- Laravel+Layer實(shí)現(xiàn)圖片上傳功能(整理篇)
- Laravel框架實(shí)現(xiàn)發(fā)送短信驗(yàn)證功能代碼
- laravel框架關(guān)于搜索功能的實(shí)現(xiàn)
- laravel框架上傳圖片實(shí)現(xiàn)實(shí)時(shí)預(yù)覽功能
- laravel5.5添加echarts實(shí)現(xiàn)畫圖功能的方法
- 使用Laravel中的查詢構(gòu)造器實(shí)現(xiàn)增刪改查功能
- Laravel 6 將新增為指定隊(duì)列任務(wù)設(shè)置中間件的功能
- Laravel框架實(shí)現(xiàn)即點(diǎn)即改功能的方法分析
相關(guān)文章
通過(guò)jquery toggleClass()屬性制作文章段落更改背景顏色
jQuery制作文章段落更改背景顏色屬性jquery toggleClass()屬性。文中給大家附實(shí)例代碼和源碼,感興趣的朋友參考下吧2018-05-05JQuery Tips(2) 關(guān)于$()包裝集你不知道的
包裝集總是面向集合的,需要的朋友可以參考下。2009-12-12使用easyui從servlet傳遞json數(shù)據(jù)到前端頁(yè)面的兩種方法
這篇文章主要介紹了用easyui從servlet傳遞json數(shù)據(jù)到前端頁(yè)面的兩種方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09jquery實(shí)現(xiàn)自適應(yīng)banner焦點(diǎn)圖
本文主要分享了jquery實(shí)現(xiàn)自適應(yīng)banner焦點(diǎn)圖的示例代碼,具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02jquery在啟動(dòng)頁(yè)面時(shí),自動(dòng)加載數(shù)據(jù)的實(shí)例
下面小編就為大家分享一篇jquery在啟動(dòng)頁(yè)面時(shí),自動(dòng)加載數(shù)據(jù)的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01jQuery Easyui使用(一)之可折疊面板的布局手風(fēng)琴菜單
這篇文章主要介紹了jQuery Easyui使用(一)之可折疊面板的布局手風(fēng)琴菜單的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08jQuery中DOM樹操作之使用反向插入方法實(shí)例分析
這篇文章主要介紹了jQuery中DOM樹操作之使用反向插入方法,實(shí)例分析了反向插入方法與插入方法回調(diào)的使用技巧,需要的朋友可以參考下2015-01-01