jquery一鍵控制checkbox全選、反選或全不選
jquery attr()方法獲取標(biāo)簽的 checked 會(huì)有問(wèn)題,所以用了 prop() 方法。
Hml的checkbox沒(méi)有加name,只用了 div 嵌套。
如有更好的方法,望指點(diǎn)!!
//全選
$('#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){ // 復(fù)選框長(zhǎng)度和沒(méi)選中的個(gè)數(shù)一樣 -> 全選 , .not(':checked').length 也可以。
$('#box').children(':checkbox').prop('checked',true);
}else{ // 如果有選中個(gè)數(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>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jquery實(shí)現(xiàn)全選、反選、獲得所有選中的checkbox
- JQUERY復(fù)選框CHECKBOX全選,取消全選
- jQuery CheckBox全選、全不選實(shí)現(xiàn)代碼小結(jié)
- 用JQuery實(shí)現(xiàn)全選與取消的兩種簡(jiǎn)單方法
- jQuery判斷checkbox(復(fù)選框)是否被選中以及全選、反選實(shí)現(xiàn)代碼
- jquery操作checkbox實(shí)現(xiàn)全選和取消全選
- jquery復(fù)選框CHECKBOX全選、反選
- JQUERY CHECKBOX全選,取消全選,反選方法三
- 基于JQuery實(shí)現(xiàn)CheckBox全選全不選
- jquery實(shí)現(xiàn)全選功能
相關(guān)文章
jquery實(shí)現(xiàn)點(diǎn)擊向下展開(kāi)菜單項(xiàng)(伸縮導(dǎo)航)效果
這篇文章主要介紹了jquery實(shí)現(xiàn)點(diǎn)擊向下展開(kāi)菜單項(xiàng)(伸縮導(dǎo)航)效果,通過(guò)jquery遍歷及匹配頁(yè)面元素并動(dòng)態(tài)修改頁(yè)面元素樣式實(shí)現(xiàn)該功能,需要的朋友可以參考下2015-08-08
『jQuery』.html(),.text()和.val()的概述及使用
如何使用jQuery中的.html(),.text()和.val()三種方法,用于讀取,修改元素的html結(jié)構(gòu),元素的文本內(nèi)容,以及表單元素的value值的方法2013-04-04
jQuery綁定點(diǎn)擊事件與改變事件的方式總結(jié)及多個(gè)元素綁定多個(gè)事件
我們一說(shuō)到j(luò)Query中對(duì)于元素的修改,就是元素的內(nèi)容、屬性、樣式的修改,下面這篇文章主要給大家介紹了關(guān)于jQuery綁定點(diǎn)擊事件與改變事件的方式總結(jié)及多個(gè)元素綁定多個(gè)事件的相關(guān)資料,需要的朋友可以參考下2022-12-12
jQuery中$.ajax()和$.getJson()同步處理詳解
這篇文章主要介紹了jQuery中$.ajax()和$.getJson()同步處理詳解的相關(guān)資料,非常的細(xì)致全面,有需要的小伙伴可以參考下。2015-08-08
Jquery ajax請(qǐng)求導(dǎo)出Excel表格的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇Jquery ajax請(qǐng)求導(dǎo)出Excel表格的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
jquery插件jquery.nicescroll實(shí)現(xiàn)圖片無(wú)滾動(dòng)條左右拖拽的方法
這篇文章主要介紹了jquery插件jquery.nicescroll實(shí)現(xiàn)圖片無(wú)滾動(dòng)條左右拖拽的方法,實(shí)例分析了jquery.nicescroll插件實(shí)現(xiàn)圖片拖拽效果的方法,需要的朋友可以參考下2015-08-08
jQuery 利用ztree實(shí)現(xiàn)樹(shù)形表格的實(shí)例代碼
最近公司要做一個(gè)樹(shù)形表格,由于之前對(duì)ztree實(shí)現(xiàn)基本的樹(shù)形結(jié)構(gòu),所以想到用ztree來(lái)做,下面小編給大家分享實(shí)現(xiàn)代碼,感興趣的朋友一起看看吧2017-09-09
jQuery Ajax請(qǐng)求狀態(tài)管理器打包
現(xiàn)在的網(wǎng)站,在一個(gè)網(wǎng)頁(yè)中有異步請(qǐng)求甚至許多個(gè)異步請(qǐng)求已經(jīng)不足為奇。Ajax已經(jīng)成為了現(xiàn)在網(wǎng)站必須的基本功能,使網(wǎng)頁(yè)應(yīng)用更接近于桌面應(yīng)用2012-05-05
利用jQuery的$.event.fix函數(shù)統(tǒng)一瀏覽器event事件處理
做WEB前端開(kāi)發(fā)的人都知道不同的瀏覽器對(duì)事件的處理方式是有區(qū)別的。2009-12-12

