jQuery實現(xiàn)全選反選操作案例
更新時間:2021年08月10日 14:02:11 作者:來干了這碗代碼
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)全選操作案例,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了jQuery實現(xiàn)全選反選操作的具體代碼,供大家參考,具體內(nèi)容如下
全選+反選
可根據(jù)控制臺結(jié)合查看結(jié)果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>過濾選擇器</title> <script src="jquery-3.2.1.min.js"></script> </head> <body> <table border="1"> <tr> <td><input type="checkbox" value="1"></td> <td>劍圣</td> <td>450</td> </tr> <tr> <td><input type="checkbox" value="2"></td> <td>劍豪</td> <td>6300</td> </tr> <tr> <td><input type="checkbox" value="3"></td> <td>劍姬</td> <td>6300</td> </tr> <tr> <td><input type="checkbox" value="4"></td> <td>劍魔</td> <td>6300</td> </tr> </table> <input type="button" value="點擊選擇使用第一個" id="firstBtn"> <input type="button" value="點擊選擇使用最后一個" id="lastBtn"> <input type="button" value="全選適用于批量刪除" id="allBtn"> <input type="button" value="查看已選中的" id="checkBtn"> <input type="button" value="查看未選中的" id="nocheckBtn"> <input type="button" value="反選" id="overBtn"> <input type="button" value="反選的升級版" id="overBtn1"> <script> $(function() { //jQuery 使用過濾選擇器 達到 奇偶數(shù)變色 $("table tr:even").css('background-color','pink'); $("table tr:odd").css('background-color','blue'); // // 拿去第一個 $("#firstBtn").click(function() { var first = $("table tr:first").html(); console.log(first); }) // 拿取最后一個 $("#lastBtn").click(function() { var last = $("table tr:last").text(); console.log(last); }) // 全選 ---- 用來批量刪除 $("#allBtn").click(function() { // 思路找出所有 checkbox的 td 進行遍歷 選中即可 $.each($("table tr td>input"), function(index, value) { // console.log(index); // console.log(value); console.log($(this).val()); // 遍歷取值 $(this).prop('checked',true); // 全選 }) }) // 點擊查看已經(jīng)選中的 $("#checkBtn").click(function() { // 使用過濾選擇器 可以選中 : $("table tr td>input:checked") $.each($("table tr td>input:checked"), function(index, value) { console.log($(this).val()); // 遍歷取值 }) }) // 點擊查看未選中的 $("#nocheckBtn").click(function() { console.log($("table tr td>input:not(:checked)")) }) // 反選 $("#overBtn").click(function() { $.each($("table tr td>input"), function(index, value) { var istrue =$(this).prop("checked"); //console.log(value.checked = !value.checked); // 遍歷取值 if(istrue){ $(this).prop("checked",false); } else{ $(this).prop("checked",true); } }) }) // 升級版的全/反選 $("#overBtn1").click(function() { $.each($("table tr td>input"), function(index, value){ $(this).prop("checked",!$(this).prop("checked")) }) }) }) </script> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jquery實現(xiàn)全選、反選、獲得所有選中的checkbox
- JQUERY復選框CHECKBOX全選,取消全選
- jQuery CheckBox全選、全不選實現(xiàn)代碼小結(jié)
- 用JQuery實現(xiàn)全選與取消的兩種簡單方法
- jQuery判斷checkbox(復選框)是否被選中以及全選、反選實現(xiàn)代碼
- jquery操作checkbox實現(xiàn)全選和取消全選
- jquery復選框CHECKBOX全選、反選
- JQUERY CHECKBOX全選,取消全選,反選方法三
- jquery一鍵控制checkbox全選、反選或全不選
- 基于JQuery實現(xiàn)CheckBox全選全不選
相關(guān)文章
jQuery插件echarts實現(xiàn)的去掉X軸、Y軸和網(wǎng)格線效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件echarts實現(xiàn)的去掉X軸、Y軸和網(wǎng)格線效果,結(jié)合實例形式分析了echarts插件繪制表格圖及圖形相關(guān)屬性設(shè)置操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03jQuery實現(xiàn)ajax的疊加和停止(終止ajax請求)
這篇文章主要介紹了jQuery實現(xiàn)ajax的疊加和停止的關(guān)鍵代碼,代碼簡單易懂,需要的朋友可以參考下2016-08-08jquery.boxy彈出框(后隔N秒后自動隱藏/自動跳轉(zhuǎn))
對于 Boxy彈出框的使用之前寫過一些文章(查看jquery.boxy基礎(chǔ)),今天主要是在解決一個需要之后,覺得值得把它記錄下來,所以就再寫一篇,主要功能是,在彈出對話框后,隔N秒后自動隱藏,還有就是自動跳轉(zhuǎn)2013-01-01jQuery使用hide()、toggle()函數(shù)實現(xiàn)相機品牌展示隱藏功能
這篇文章主要介紹了jQuery使用hide()、toggle()函數(shù)實現(xiàn)相機品牌展示隱藏功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-01-01