用自定義圖片代替原生checkbox實(shí)現(xiàn)全選,刪除以及提交的方法
UI妹子覺得原生的checkbox復(fù)選框太丑,非要用圖片來代替,那就依她。做出來的效果類似這樣:
要代替原生的checkbox。 那么要實(shí)現(xiàn)原生checkbox能干的事。我們主要實(shí)現(xiàn)這幾點(diǎn)就可以了。
1.點(diǎn)擊列表中的勾選圖片。圖片會(huì)變換成相反的。
2.如果當(dāng)前是全選狀態(tài),不勾選列表中的某一項(xiàng),全選處的圖片變成未勾選的狀態(tài)。
如果點(diǎn)擊了某一項(xiàng)使列表成了全選的狀態(tài), 全選處的圖片變成勾選狀態(tài)。
3.全選功能
4.點(diǎn)擊刪除,能刪除全部的勾選的圖片。
1.準(zhǔn)備工作:因?yàn)橐罅坑玫絻蓚€(gè)圖片的切換,我們單獨(dú)定義出來:
var uncheckUrl = 'images/uncheck.png'; var checkUrl = 'images/check.png';
2.點(diǎn)擊列表中的勾選圖片,圖片變成相反的,并且可能引發(fā) 全選圖片的變化。
我們用on事件,因?yàn)榱斜碇械男畔⑹莿?dòng)態(tài)添加進(jìn)去的。
//點(diǎn)擊復(fù)選框圖片 $("#ul").on('click', 'li img', function(event) { var imgDom = $(this); if(imgDom.attr("src")==checkUrl){ $("#SelectAllImg").attr("src",uncheckUrl); imgDom.attr("src",uncheckUrl); }else{ imgDom.attr("src",checkUrl); //上面部分是變換圖片自身,下面部分是檢測(cè)是否要變換全選圖片。 //通過比較圖片總數(shù)量與選中圖片數(shù)量來決定。 var imgLength = $('#ul li img').length; var checkLength = 0; for (var i = 0; i <= imgLength; i++) { if($('#ul li img').eq(i).attr("src") == checkUrl){ checkLength ++; } } if(imgLength == checkLength){ $("#SelectAllImg").attr("src",checkUrl); } } });
3.全選功能。改變?nèi)x圖標(biāo)的同時(shí),改變所有圖標(biāo),跟全選圖標(biāo)保持一致。
//全選中的圖標(biāo) $("#SelectAllImg").click(function() { if($(this).attr("src")== checkUrl){ $(this).attr("src",uncheckUrl); $("#ul li img").attr("src",uncheckUrl); }else{ $(this).attr("src",checkUrl); $("#ul li img").attr("src",checkUrl); } });
4.刪除功能。 點(diǎn)刪除按鈕,刪除勾選的圖片所在的行。
注意:里面的循環(huán)是倒序循環(huán)。 這樣處理的原因是:如果順序循環(huán),那么刪除了前面的行,真實(shí)的imglength就變小了,所有后面的節(jié)點(diǎn)的索引值都發(fā)生了變化,往前移了, 而我們 eq(i)來刪除序號(hào)為i的節(jié)點(diǎn),就刪除不到了。
//刪除選中的數(shù)據(jù) $("#del").click(function() { var imgLength = $('#ul li img').length; var checkDom = ''; for (var i = imgLength - 1; i >= 0; i--) { checkDom = $('#ul li img').eq(i); if(checkDom.attr("src") == checkUrl){ checkDom.parent().remove(); }; }; });
5.最后我們要提交表單的時(shí)候,如何處理呢? 我們是用ajax提交還是直接表單submit提交呢?
這里提供兩種方案的思路。
5.1 ajax思路,本人比較喜歡用ajax提交。
類似這樣,deviceIdArr就獲取到了選中的框的 內(nèi)容。 你要獲取該列的id,也類似。
var deviceIdArr = []; $('#ul li img').each(function() { if($(this).attr('src') == checkUrl){ deviceid = trim($(this).parent().text()); deviceIdArr.push(deviceid); } });
5.2表單提交思路。
在每一個(gè)圖片checkbox的旁邊,放上一個(gè)隱藏的真實(shí)checkbox。這樣用戶就看不到。
每一次對(duì)選中圖片進(jìn)行修改的時(shí)候,都對(duì)應(yīng)地修改相應(yīng)隱藏checkbox的選中狀態(tài),
最后提交的時(shí)候直接提交隱藏checkbox的狀態(tài)就好。
調(diào)試的時(shí)候可以讓那些隱藏的checkbox顯現(xiàn)出來,方便我們直觀看到checkbox與圖片的對(duì)應(yīng)狀態(tài)是否準(zhǔn)確。
6.一點(diǎn)優(yōu)化意見。為了避免 第一次 點(diǎn)擊 圖片時(shí) 切換圖片的延遲感,可 預(yù)加載 選中狀態(tài)的圖片 和 未選中狀態(tài)的圖片。
比如我們這個(gè)默認(rèn)狀態(tài)下會(huì)顯示未選中的圖標(biāo), 而選中狀態(tài)的圖標(biāo)是沒有顯示的。 如果等點(diǎn)擊的時(shí)候再來加載,就會(huì)有延遲感。
解決辦法,在頁面底部加上這一句:
<img src="images/check.png" style="display:none;">
當(dāng)然,也可以用CSSSprites精靈圖。
注:本文是使用了jQuery來用自定義圖片代替原生checkbox復(fù)選框?qū)崿F(xiàn)全選,刪除,表單提交。
換成原生JavaScript也不難。
以上就是小編為大家?guī)淼挠米远x圖片代替原生checkbox實(shí)現(xiàn)全選,刪除以及提交的方法全部?jī)?nèi)容了,希望大家多多支持腳本之家~
相關(guān)文章
純JAVASCRIPT圖表動(dòng)畫插件Highcharts Examples
官方提供免費(fèi)的下載包以及詳細(xì)的文檔說明,非常的值得收藏。2011-04-04Javascript中封裝window.open解決不兼容問題
window.open不兼容,其實(shí)不是, 因?yàn)椴荒苤苯訄?zhí)行, 必須通過用戶手動(dòng)觸發(fā)才行,下面有個(gè)實(shí)例,大家可以看看2014-09-09基于jquery擴(kuò)展漂亮的CheckBox(自己編寫)
默認(rèn)的html復(fù)選框控件樣式可定義相當(dāng)有限,下面就與大家分享下自己編寫的CheckBox控件。喜歡的朋友可以拿去使用2013-11-11jquery.picsign圖片標(biāo)注組件實(shí)例詳解
這篇文章主要介紹了jquery.picsign 自己封裝的第一個(gè)開源組件,需要的朋友可以參考下2018-02-02