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)文章
jquery mobile的觸控點擊事件會多次觸發(fā)問題的解決方法
這篇文章主要介紹了jquery mobile的觸控點擊事件會多次觸發(fā)問題的解決方法以及替代方法,需要的朋友可以參考下2014-05-05
jQuery分頁插件jquery.pagination.js使用方法解析
這篇文章主要為大家詳細(xì)解析了jQuery分頁插件jquery.pagination使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-02-02
jquery中郵箱地址 URL網(wǎng)站地址正則驗證實例代碼
QQ網(wǎng)站有一個網(wǎng)站舉報的功能,看了一些js代碼覺得寫得很不錯,我就拿下來了,下面是一個email驗證與url網(wǎng)址驗證js代碼,分享給大家2013-09-09
jquery.simple.tree插件 更簡單,兼容性更好的無限樹插件
在這里介紹一款小巧,功能強(qiáng)大,能拖拽,支持異步,且兼容性更高的jquery Tree插件2010-09-09
jquery 正整數(shù)數(shù)字校驗正則表達(dá)式
本文主要介紹了jquery正整數(shù)數(shù)字校驗正則表達(dá)式的方法。具有一定的參考價值,下面跟著小編一起來看下吧2017-01-01

