BootStrap iCheck插件全選與獲取value值的解決方法
更新時間：2016年08月24日 09:59:25 投稿：mrr
這篇文章主要介紹了BootStrap iCheck插件全選與獲取value值的解決方法,解決方法其實很簡單，下面小編給大家分享下這方面的知識
在使用jQuery iCheck 插件的時候遇到了一個問題，就是當(dāng)我們使用普通的js全選功能無效了。
$("#checkall").click(
function(){
if(this.checked){
$("input[name='checkname']").each(function(){this.checked=true;});
}else{
$("input[name='checkname']").each(function(){this.checked=false;});
}
}
);
這樣來寫對默認(rèn)的checkbox框沒問題，但是當(dāng)使用iCheck 插件后將無效。
那么該怎么解決呢？
最后是在stackoverflow 找到的解決方法：
地址是這里： http://stackoverflow.com/questions/17820080/function-select-all-and-icheck
//全選獲取數(shù)值
var checkAll = $('input.all');
var checkboxes = $('input.check');
checkAll.on('ifChecked ifUnchecked', function(event) {
if (event.type == 'ifChecked') {
checkboxes.iCheck('check');
} else {
checkboxes.iCheck('uncheck');
}
});
checkboxes.on('ifChanged', function(event){
if(checkboxes.filter(':checked').length == checkboxes.length) {
checkAll.prop('checked', 'checked');
} else {
checkAll.removeProp('checked');
}
checkAll.iCheck('update');
});
在解決了全選問題后，又遇到了一個新的問題，獲取選中的checkbox的value的時候，使用：$(this).attr('checked');獲取不到值了~，蛋疼。
最后幾經(jīng)Google搜索，還是在stackoverflow 找到了啟發(fā)，判斷checkbox的布爾值，使用 ：$(this).is(':checked');
最后代碼的解決方法如下：
$(".ajax-delete").click(function(){
var url = $(this).attr('data-url');
var str="";
var ids="";
$("input[name='id']:checkbox").each(function(){
if(true == $(this).is(':checked')){
str+=$(this).val()+",";
}
});
if(str.substr(str.length-1)== ','){
ids = str.substr(0,str.length-1);
}
console.log(ids);
});
以上所述是小編給大家介紹的BootStrap iCheck插件全選與獲取value值的解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- JS樹形菜單組件Bootstrap TreeView使用方法詳解
- 淺析使用BootStrap TreeView插件實現(xiàn)靈活配置快遞模板
- Bootstrap樹形菜單插件TreeView.js使用方法詳解
- 淺析BootStrap Treeview的簡單使用
- 基于MVC5和Bootstrap的jQuery TreeView樹形控件(二)之?dāng)?shù)據(jù)支持json字符串、list集合
- 基于MVC5和Bootstrap的jQuery TreeView樹形控件(一)之?dāng)?shù)據(jù)支持json字符串、list集合
- bootstrap-treeview自定義雙擊事件實現(xiàn)方法
- 利用Bootstrap實現(xiàn)表格復(fù)選框checkbox全選
- Angularjs+bootstrap+table多選（全選）支持單擊行選中實現(xiàn)編輯、刪除功能
- bootstrap插件treeview實現(xiàn)全選父節(jié)點下所有子節(jié)點和反選功能
相關(guān)文章
本文給大家詳細(xì)介紹了jQuery中的原型方法map的使用指南和源碼分析，十分的不錯，對于大家學(xué)習(xí)jQuery非常有幫助，這里推薦給大家。2015-07-07
本文詳細(xì)講解了Jquery回調(diào)對象與延遲對象的用法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-05-05
jQuery實現(xiàn)鼠標(biāo)經(jīng)過像翻頁和描點鏈接效果
這篇文章主要介紹了jQuery實現(xiàn)鼠標(biāo)經(jīng)過像翻頁和描點鏈接效果的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
這篇文章主要介紹了jQuery實現(xiàn)點擊小圖顯示大圖效果，功能實現(xiàn)非常簡單，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
jQuery EasyUI 是一個基于 jQuery 的框架，集成了各種用戶界面插件。接下來通過本文給大家介紹jQuery Easyui實現(xiàn)左右布局，涉及到到easyui左右布局相關(guān)知識，感興趣的朋友一起學(xué)習(xí)吧2016-01-01
打開空白新窗口，再給新窗口的localtion賦值，需要的朋友可以參考下2012-08-08
jquery中$(#form :input)與$(#form input)的區(qū)別
本節(jié)為大家介紹下jquery 中$(#form :input)與$(#form input)的區(qū)別,需要的朋友可以參考下2014-08-08
利用jqprint插件打印頁面內(nèi)容的實現(xiàn)方法
qprint是一個基于jquery編寫的頁面打印的一個小插件，但是不得不承認(rèn)這個插件確實很厲害，下面這篇文章主要給大家介紹了關(guān)于利用jqprint插件如何打印頁面內(nèi)容的實現(xiàn)方法，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
這篇文章主要介紹了使用jquery清空、復(fù)位整個輸入域，非常的簡單實用，這里推薦給大家,需要的朋友可以參考下2015-04-04
jquery 將日期分離成年月日的代碼，需要的朋友可以參考下。2010-05-05