標籤：對象 ext 代碼 type log doctype utf-8 英語 false
這是一段用jquery實現全選的代碼，主要思路如下：
1.所有的複選框都有單擊事件，所有效果都是在單擊事件下實現的
2.全選複選框所實現的功能與其他複選選項實現的功能不同，所有在單擊事件內做一個判斷，是否是全選複選框的單擊事件
3.如果是，則執行判斷全選複選框是否選中，如果目前狀態為選中，那麼點擊後取消勾選，同時取消所有選項的勾選，如果全選當前未選中，點擊後勾選，並勾選所有
4.如果不是，說明點擊的對象是出全選外的其他選項，那麼就要判斷當前已經勾選的選項的數量，是否等於除了全選複選框以外所有選項的數量，如果相等，則說明，選項全部勾選，同時將全選複選框也勾選，否則不勾選。
下面是My Code。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>全選效果</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(‘input‘).click(function(){ if($(this).index() == 0){ //判斷當前全選框是否選中，如果選中則全選，否則全不選 if($(‘input‘).eq(0).prop(‘checked‘)){ $(this).nextAll().prop(‘checked‘,true); }else{ $(this).nextAll().prop(‘checked‘,false); } }else{ //判斷除了全選之外的選項是否全部選中，選中則勾上全選，否則全不選 if($(‘input:gt(0):checked‘).length == $(‘input‘).length-1){ $(‘input‘).eq(0).prop(‘checked‘,true) }else{ $(‘input‘).eq(0).prop(‘checked‘,false) } } }) }) </script> </head> <body> <input type="checkbox" />全選 <input type="checkbox" />語文 <input type="checkbox" />數學 <input type="checkbox" />英語 </body></html>
jQuery實現全選效果【轉】
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
