jQuery實現全選效果

時間 2019-11-22

標籤 jquery 實現全選效果欄目 JQuery 简体版

原文原文鏈接

這是一段用jquery實現全選的代碼，主要思路以下：javascript

1.全部的複選框都有單擊事件，全部效果都是在單擊事件下實現的html

2.全選複選框所實現的功能與其餘複選選項實現的功能不一樣，全部在單擊事件內作一個判斷，是不是全選複選框的單擊事件java

3.若是是，則執行判斷全選複選框是否選中，若是當前狀態爲選中，那麼點擊後取消勾選，同時取消全部選項的勾選，若是全選當前未選中，點擊後勾選，並勾選全部jquery

4.若是不是，說明點擊的對象是出全選外的其餘選項，那麼就要判斷當前已經勾選的選項的數量，是否等於除了全選複選框之外全部選項的數量，若是相等，則說明，選項所有勾選，同時將全選複選框也勾選，不然不勾選。this

下面是個人代碼。spa

<!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>

實現全選效果的思路也比較多，這種思路相對與分開兩個單擊事件的思路來講，稍微有點難理解，但其實實現效果的代碼，是同樣的。code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。