首頁 > 文章 > web前端 > jquery怎麼達到全選效果

jquery怎麼達到全選效果

藏色散人原創: 2021-11-12 10:26:274988瀏覽

jquery實現全選效果的方法：1、建立一個HTML範例檔案；2、透過「$('input').click(function(){...}」方法判斷目前全選框是否選取即可。

jquery怎麼達到全選效果

本文操作環境：windows7系統、jquery3.2.1版、DELL G3電腦

jquery怎麼實現全選效果？

jQuery實作全選效果

#這是一段用jquery實作全選的程式碼，主要想法如下：

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

2.全選複選框所實現的功能與其他復選選項實現的功能不同，所有在單擊事件內做一個判斷，是否是全選複選框的單擊事件

3.如果是，則執行判斷全選複選框是否選中，如果當前狀態為選中，那麼點擊後取消勾選，同時取消所有選項的勾選，如果全選目前未選中，點擊後勾選，並勾選所有

4.如果不是，說明點擊的物件是出全選外的其他選項，那麼就要判斷目前已經勾選的選項的數量，是否等於除了全選複選框以外所有選項的數量，如果相等，則說明，選項全部勾選，同時將全選複選框也勾選，否則不勾選。

下面是我的程式碼。

<!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(){
                $(&#39;input&#39;).click(function(){
                    if($(this).index() == 0){
                        //判断当前全选框是否选中，如果选中则全选，否则全不选
                        if($(&#39;input&#39;).eq(0).prop(&#39;checked&#39;)){
                            $(this).nextAll().prop(&#39;checked&#39;,true);
                        }else{
                            $(this).nextAll().prop(&#39;checked&#39;,false);
                        }
                    }else{
                        //判断除了全选之外的选项是否全部选中，选中则勾上全选，否则全不选
                        if($(&#39;input:gt(0):checked&#39;).length == $(&#39;input&#39;).length-1){
                            $(&#39;input&#39;).eq(0).prop(&#39;checked&#39;,true)
                        }else{
                            $(&#39;input&#39;).eq(0).prop(&#39;checked&#39;,false)
                        }
                    }  
                })
            })
        </script>
    </head>
    <body>
        <input type="checkbox" />全选
        <input type="checkbox" />语文
        <input type="checkbox" />数学
        <input type="checkbox" />英语
    </body>
</html>

實現全選效果的想法也比較多，這種想法相對與分開兩個點擊事件的想法來說，稍微有點難理解，但其實實現效果的程式碼，是一樣的。

#推薦學習：《jquery影片教學》

以上是jquery怎麼達到全選效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！

jquery html function 对象事件 input

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：淺談NVM如何安裝和管理多個Node版本下一篇：淺談NVM如何安裝和管理多個Node版本

看更多