jQuery模糊比對checkbox全選 value實現checkbox部分或全部全選

jQuery模糊比對checkbox全選 value實現checkbox部分或全部全選

本文章總結jQuery實現checkbox三種情況的全選功能

第一種：等值全選，也稱name的等值全選，通過checkbox的名稱name實現。

第二種：模糊全選，也稱id模糊全選，通過checkbox的id或value值實現。

第三種：值範圍全選，也稱value值範圍全選，通過checkbox的value值實現，或者截取id數字尾碼範圍判斷實現。

 

 

等值全選

 

在工作中經常會用到checkbox的全選功能，平時大家用得最多的全選和反選是第一種，一般都是基於全部名稱相同的checkbox進行實現，這種全選比較簡單。實現代碼如下：

 

$("input#allSer").click(function(){    if(this.checked){    $("input[type=checkbox][name=newselectedServers]").attr("checked",true);       }else{    $("input[type=checkbox][name=newselectedServers]").attr("checked",false);    }});

以上代碼實現的功能：當單擊id="allSer”的按鈕時，所有名name=“newselectedServers"的checkbox就被全選上，再次單擊時則取消全選，功能比較簡單，就不再詳述。

 

 

模糊全選

 

模糊全選可已實現特定的需求，如首碼或尾碼包含特定字元，首先應瞭解jQuery模糊比對的規則：

[屬性名稱] 匹配包含給定屬性的元素
[att=value] 匹配包含給定屬性的元素
[att*=value] 模糊比對
[att!=value] 不能是這個值
[att$=value] 結尾是這個值
[att^=value] 開頭是這個值
[att1][att2][att3]... 匹配多個屬性條件中的一個

實現例子如下：

 

$("input[type=checkbox][name=newselectedServers][id^=new]").attr("checked",true);//全選所有id首碼為new的checkbox$("input[type=checkbox][name=newselectedServers][id$=servers]").attr("checked",true);//全選所有id尾碼為servers的checkbox$("input[type=checkbox][name=newselectedServers][value^=20]").attr("checked",true);//全選所有value首碼為20的checkbox

反選類同代碼就不貼出來。

 

還有一種多值模糊全選，實現代碼如下：

 

$("input[type=checkbox][name=newselectedServers][value^=20],[value^=21],[value^=50],[value^=51],[value^=70],[value^=71]").attr("checked",true);

以上代碼實現所有以20,21,50,51,70,71開頭的checkbox的全選。

 

 

值範圍全選

 

讓我頭痛的是第三種值訪問全選，前兩種都實現不了我想要的功能。

功能要求：實現伺服器列表部分全選，伺服器列表的value含有的值是數字，特定功能的伺服器的值在某一指定的範圍，勾選特定功能的全選時就要把指定範圍的伺服器列表全部選上。

以後需求看起來簡單，實現起來也簡單，難就難找資料的過程和在想的過程，在網上找了很多關係jQuery實現checkbox全選資料和微博，都沒有一篇符合我的要求，最後只能通過自己各種想法，各種調試，最終還是實現的自己想要的功能。想法的關鍵點在於平時用的全選大部分都是基於checkbox的name和id，很少人使用value實現全選，想到這就成功了一半，再通過遍曆比較值的大小就可以實現值範圍的全選，大家都迫不及待想知道實現的代碼了吧。

 

//實現九遊伺服器的全反選，九遊伺服器的value範圍在2000-5000之間$("input#sjspecialSer").click(function(){ if(this.checked){    //遍曆value，轉換成數字對比 $("input[type=checkbox][name=newselectedServers]").each(function(index,element){ var serverId = Number(element.value); if(serverId >= 2000 && serverId < 5000){ $(element).attr("checked",true); } }); }else{     $("input[type=checkbox][name=newselectedServers]").each(function(index,element){ var serverId = Number(element.value); if(serverId >= 2000 && serverId < 5000){ $(element).attr("checked",false); } }); }});//實現樂玩伺服器的全反選，樂玩伺服器的value在5000-1000之間$("input#lwspecialSer").click(function(){ if(this.checked){  //遍曆value，轉換成數字對比 $("input[type=checkbox][name=newselectedServers]").each(function(index,element){ var serverId = Number(element.value); if(serverId >= 5000 && serverId < 10000){ $(element).attr("checked",true); } }); }else{     $("input[type=checkbox][name=newselectedServers]").each(function(index,element){ var serverId = Number(element.value); if(serverId >= 5000 && serverId < 10000){ $(element).attr("checked",false); } }); }});

 

到這裡已經豁然開朗，大功告成，jQuery通過name、id和value實現對各種情況的checkbox全選，看了這篇部落格還有什麼checkbox的全選難得到你嗎?乾貨不要自己知道好了，要樂於分享，轉載請標明出處，謝謝！