您好,登錄后才能下訂單哦!
小編給大家分享一下jquery如何實(shí)現(xiàn)一鍵控制checkbox全選、反選或全不選,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
jquery attr()方法獲取標(biāo)簽的 checked 會(huì)有問題,所以用了 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){ // 復(fù)選框長(zhǎng)度和沒選中的個(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>
以上是“jquery如何實(shí)現(xiàn)一鍵控制checkbox全選、反選或全不選”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。