jquery一鍵控制checkbox全選、反選或全不選
jquery attr()方法獲取標簽的 checked 會有問題,所以用了 prop() 方法。
Hml的checkbox沒有加name,只用了 div 嵌套。
如有更好的方法,望指點!!
//全選
$('#allChecked').change(function(){
$('#box').children(':checkbox').prop('checked',$(this).is(':checked')?true:false);
});
//反選
$('#invertChecked').change(function(){
if($(this).is(':checked')){
$('#box').children(':checkbox').each(function(){
$(this).prop('checked',$(this).is(':checked')?false:true);
});
}
});
//一鍵控制全選、反選、全不選
$('#orChecked').change(function(){
if($(this).is(':checked')){
var box = $('#box').children(':checkbox');
if(box.length==box.filter(':not(:checked)').length){ // 復選框長度和沒選中的個數(shù)一樣 -> 全選 , .not(':checked').length 也可以。
$('#box').children(':checkbox').prop('checked',true);
}else{ // 如果有選中個數(shù),-> 反選
$('#box').children(':checkbox').each(function(){
$(this).prop('checked',$(this).is(':checked')?false:true);
});
}else{
$('#box').children(':checkbox').prop('checked',false); // 如控制鍵取消選中,剩余的checkbox也取消選中
}
});
<div align="center">
<div id="box">
<input type="checkbox" value="1">西瓜
<input type="checkbox" value="2">芒果
<input type="checkbox" value="3">橙
<input type="checkbox" value="4">山竹
<input type="checkbox" value="5">草莓
<input type="checkbox" value="6">火龍果
</div>
<br>
<input type="checkbox" id="allChecked">全選
<input type="checkbox" id="invertChecked">反選
<input type="checkbox" id="orChecked">全選/反選/全不選
</div>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
jquery實現(xiàn)點擊向下展開菜單項(伸縮導航)效果
這篇文章主要介紹了jquery實現(xiàn)點擊向下展開菜單項(伸縮導航)效果,通過jquery遍歷及匹配頁面元素并動態(tài)修改頁面元素樣式實現(xiàn)該功能,需要的朋友可以參考下2015-08-08
『jQuery』.html(),.text()和.val()的概述及使用
如何使用jQuery中的.html(),.text()和.val()三種方法,用于讀取,修改元素的html結構,元素的文本內(nèi)容,以及表單元素的value值的方法2013-04-04
jQuery綁定點擊事件與改變事件的方式總結及多個元素綁定多個事件
我們一說到jQuery中對于元素的修改,就是元素的內(nèi)容、屬性、樣式的修改,下面這篇文章主要給大家介紹了關于jQuery綁定點擊事件與改變事件的方式總結及多個元素綁定多個事件的相關資料,需要的朋友可以參考下2022-12-12
jQuery中$.ajax()和$.getJson()同步處理詳解
這篇文章主要介紹了jQuery中$.ajax()和$.getJson()同步處理詳解的相關資料,非常的細致全面,有需要的小伙伴可以參考下。2015-08-08
Jquery ajax請求導出Excel表格的實現(xiàn)代碼
下面小編就為大家?guī)硪黄狫query ajax請求導出Excel表格的實現(xiàn)代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
jquery插件jquery.nicescroll實現(xiàn)圖片無滾動條左右拖拽的方法
這篇文章主要介紹了jquery插件jquery.nicescroll實現(xiàn)圖片無滾動條左右拖拽的方法,實例分析了jquery.nicescroll插件實現(xiàn)圖片拖拽效果的方法,需要的朋友可以參考下2015-08-08
jQuery 利用ztree實現(xiàn)樹形表格的實例代碼
最近公司要做一個樹形表格,由于之前對ztree實現(xiàn)基本的樹形結構,所以想到用ztree來做,下面小編給大家分享實現(xiàn)代碼,感興趣的朋友一起看看吧2017-09-09
利用jQuery的$.event.fix函數(shù)統(tǒng)一瀏覽器event事件處理
做WEB前端開發(fā)的人都知道不同的瀏覽器對事件的處理方式是有區(qū)別的。2009-12-12

