用自定義圖片代替原生checkbox實現(xiàn)全選,刪除以及提交的方法
UI妹子覺得原生的checkbox復(fù)選框太丑，非要用圖片來代替，那就依她。做出來的效果類似這樣：
要代替原生的checkbox。 那么要實現(xiàn)原生checkbox能干的事。我們主要實現(xiàn)這幾點就可以了。
1.點擊列表中的勾選圖片。圖片會變換成相反的。
2.如果當(dāng)前是全選狀態(tài)，不勾選列表中的某一項，全選處的圖片變成未勾選的狀態(tài)。
如果點擊了某一項使列表成了全選的狀態(tài)， 全選處的圖片變成勾選狀態(tài)。
3.全選功能
4.點擊刪除，能刪除全部的勾選的圖片。
1.準(zhǔn)備工作：因為要大量用到兩個圖片的切換，我們單獨定義出來：
var uncheckUrl = 'images/uncheck.png'; var checkUrl = 'images/check.png';
2.點擊列表中的勾選圖片，圖片變成相反的，并且可能引發(fā) 全選圖片的變化。
我們用on事件，因為列表中的信息是動態(tài)添加進(jì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);
//上面部分是變換圖片自身，下面部分是檢測是否要變換全選圖片。
//通過比較圖片總數(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)的同時，改變所有圖標(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.刪除功能。 點刪除按鈕，刪除勾選的圖片所在的行。
注意：里面的循環(huán)是倒序循環(huán)。 這樣處理的原因是：如果順序循環(huán)，那么刪除了前面的行，真實的imglength就變小了，所有后面的節(jié)點的索引值都發(fā)生了變化，往前移了， 而我們 eq(i)來刪除序號為i的節(jié)點，就刪除不到了。
//刪除選中的數(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.最后我們要提交表單的時候，如何處理呢？ 我們是用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表單提交思路。
在每一個圖片checkbox的旁邊，放上一個隱藏的真實checkbox。這樣用戶就看不到。
每一次對選中圖片進(jìn)行修改的時候，都對應(yīng)地修改相應(yīng)隱藏checkbox的選中狀態(tài)，
最后提交的時候直接提交隱藏checkbox的狀態(tài)就好。
調(diào)試的時候可以讓那些隱藏的checkbox顯現(xiàn)出來，方便我們直觀看到checkbox與圖片的對應(yīng)狀態(tài)是否準(zhǔn)確。
6.一點優(yōu)化意見。為了避免 第一次 點擊 圖片時 切換圖片的延遲感，可 預(yù)加載 選中狀態(tài)的圖片 和 未選中狀態(tài)的圖片。
比如我們這個默認(rèn)狀態(tài)下會顯示未選中的圖標(biāo)， 而選中狀態(tài)的圖標(biāo)是沒有顯示的。 如果等點擊的時候再來加載，就會有延遲感。
解決辦法，在頁面底部加上這一句：
<img src="images/check.png" style="display:none;">
當(dāng)然，也可以用CSSSprites精靈圖。
注：本文是使用了jQuery來用自定義圖片代替原生checkbox復(fù)選框?qū)崿F(xiàn)全選，刪除，表單提交。
換成原生JavaScript也不難。
以上就是小編為大家?guī)淼挠米远x圖片代替原生checkbox實現(xiàn)全選,刪除以及提交的方法全部內(nèi)容了，希望大家多多支持腳本之家~
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了jQuery展示表格點擊變色、全選、刪除的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
從今天起正式學(xué)習(xí)Jquery（實際嚴(yán)格講已經(jīng)用了幾個月的Jquery的一丁點東西），邊學(xué)邊做邊記筆記；閱讀書籍《鋒利的Jquery》+Jquery API Doc。2009-10-10
純JAVASCRIPT圖表動畫插件Highcharts Examples
官方提供免費的下載包以及詳細(xì)的文檔說明，非常的值得收藏。2011-04-04
網(wǎng)頁應(yīng)用程序需要對豐富的內(nèi)容提供簡單易用的上傳和操作方式，但是這樣會給只有少數(shù)圖片處理技能的用戶造成很大的困難。圖片剪切是最基本的圖片處理技術(shù)，這個詳細(xì)的教程將包括在jQuery庫上創(chuàng)建此參加的每一個步驟。2011-08-08
Javascript中封裝window.open解決不兼容問題
window.open不兼容,其實不是, 因為不能直接執(zhí)行, 必須通過用戶手動觸發(fā)才行，下面有個實例，大家可以看看2014-09-09
這篇文章主要介紹了jQuery如何獲取動態(tài)添加的元素的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
這篇文章主要介紹了jQuery中:animated選擇器用法,實例分析了:animated選擇器的功能、定義及匹配動畫效果元素的使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
默認(rèn)的html復(fù)選框控件樣式可定義相當(dāng)有限，下面就與大家分享下自己編寫的CheckBox控件。喜歡的朋友可以拿去使用2013-11-11
這篇文章主要介紹了jQuery中parent()方法用法,實例分析了parent()方法的功能、定義及取得緊鄰父元素的使用技巧,需要的朋友可以參考下2015-01-01
jquery.picsign圖片標(biāo)注組件實例詳解
這篇文章主要介紹了jquery.picsign 自己封裝的第一個開源組件,需要的朋友可以參考下2018-02-02