jQuery實(shí)現(xiàn)全選反選操作案例
本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)全選反選操作的具體代碼,供大家參考,具體內(nèi)容如下
全選+反選
可根據(jù)控制臺(tái)結(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>過(guò)濾選擇器</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="點(diǎn)擊選擇使用第一個(gè)" id="firstBtn"> <input type="button" value="點(diǎn)擊選擇使用最后一個(gè)" 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="反選的升級(jí)版" id="overBtn1"> <script> $(function() { //jQuery 使用過(guò)濾選擇器 達(dá)到 奇偶數(shù)變色 $("table tr:even").css('background-color','pink'); $("table tr:odd").css('background-color','blue'); // // 拿去第一個(gè) $("#firstBtn").click(function() { var first = $("table tr:first").html(); console.log(first); }) // 拿取最后一個(gè) $("#lastBtn").click(function() { var last = $("table tr:last").text(); console.log(last); }) // 全選 ---- 用來(lái)批量刪除 $("#allBtn").click(function() { // 思路找出所有 checkbox的 td 進(jìn)行遍歷 選中即可 $.each($("table tr td>input"), function(index, value) { // console.log(index); // console.log(value); console.log($(this).val()); // 遍歷取值 $(this).prop('checked',true); // 全選 }) }) // 點(diǎn)擊查看已經(jīng)選中的 $("#checkBtn").click(function() { // 使用過(guò)濾選擇器 可以選中 : $("table tr td>input:checked") $.each($("table tr td>input:checked"), function(index, value) { console.log($(this).val()); // 遍歷取值 }) }) // 點(diǎn)擊查看未選中的 $("#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); } }) }) // 升級(jí)版的全/反選 $("#overBtn1").click(function() { $.each($("table tr td>input"), function(index, value){ $(this).prop("checked",!$(this).prop("checked")) }) }) }) </script> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jquery實(shí)現(xiàn)全選、反選、獲得所有選中的checkbox
- JQUERY復(fù)選框CHECKBOX全選,取消全選
- jQuery CheckBox全選、全不選實(shí)現(xiàn)代碼小結(jié)
- 用JQuery實(shí)現(xiàn)全選與取消的兩種簡(jiǎn)單方法
- jQuery判斷checkbox(復(fù)選框)是否被選中以及全選、反選實(shí)現(xiàn)代碼
- jquery操作checkbox實(shí)現(xiàn)全選和取消全選
- jquery復(fù)選框CHECKBOX全選、反選
- JQUERY CHECKBOX全選,取消全選,反選方法三
- jquery一鍵控制checkbox全選、反選或全不選
- 基于JQuery實(shí)現(xiàn)CheckBox全選全不選
相關(guān)文章
基于jquery實(shí)現(xiàn)簡(jiǎn)單輪播圖效果
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)簡(jiǎn)單輪播圖效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04jQuery插件echarts實(shí)現(xiàn)的去掉X軸、Y軸和網(wǎng)格線效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件echarts實(shí)現(xiàn)的去掉X軸、Y軸和網(wǎng)格線效果,結(jié)合實(shí)例形式分析了echarts插件繪制表格圖及圖形相關(guān)屬性設(shè)置操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03jQuery實(shí)現(xiàn)平滑滾動(dòng)到指定錨點(diǎn)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)平滑滾動(dòng)到指定錨點(diǎn)的方法,實(shí)例分析了jQuery根據(jù)錨點(diǎn)定位滾動(dòng)的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03jQuery實(shí)現(xiàn)ajax的疊加和停止(終止ajax請(qǐng)求)
這篇文章主要介紹了jQuery實(shí)現(xiàn)ajax的疊加和停止的關(guān)鍵代碼,代碼簡(jiǎn)單易懂,需要的朋友可以參考下2016-08-08jquery.boxy彈出框(后隔N秒后自動(dòng)隱藏/自動(dòng)跳轉(zhuǎn))
對(duì)于 Boxy彈出框的使用之前寫過(guò)一些文章(查看jquery.boxy基礎(chǔ)),今天主要是在解決一個(gè)需要之后,覺(jué)得值得把它記錄下來(lái),所以就再寫一篇,主要功能是,在彈出對(duì)話框后,隔N秒后自動(dòng)隱藏,還有就是自動(dòng)跳轉(zhuǎn)2013-01-01基于jquery的direction圖片漸變動(dòng)畫效果
這個(gè)插件的制作用到j(luò)query的animate,fadeIn,fadeTo等動(dòng)畫 透明度之類的知識(shí),對(duì)css的控制樣式也是很重要的2010-05-05jQuery使用hide()、toggle()函數(shù)實(shí)現(xiàn)相機(jī)品牌展示隱藏功能
這篇文章主要介紹了jQuery使用hide()、toggle()函數(shù)實(shí)現(xiàn)相機(jī)品牌展示隱藏功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-01-01基于jquery和svg實(shí)現(xiàn)超炫酷的動(dòng)畫特效
這篇文章主要介紹了基于jquery和svg實(shí)現(xiàn)超炫酷的動(dòng)畫特效,想學(xué)習(xí)SVG的童鞋們可以來(lái)參考下。2014-12-12