首頁 > web前端 > 前端問答 > jquery怎麼實作取反方法

jquery怎麼實作取反方法

藏色散人
發布: 2021-11-19 11:12:31
原創
2754 人瀏覽過

jquery實現取反的方法:1、導入jQuery庫;2、設定點擊事件;3、循環設定其它多選框選中狀態;4、透過「!chkall;」方式實現標識變數取反即可。

jquery怎麼實作取反方法

本文操作環境:windows7系統、jquery-2.1.4版本、Dell G3電腦。

jquery怎麼實作取反方法?

利用JQuery實現全選和反選的幾種方法

如圖:要實現的效果是點擊全選框全部選中,再點擊全部不選中

jquery怎麼實作取反方法

方法一想法:1、導入jQuery函式庫,這個網路可以下載,是免費開源的,2、設定class為fruit,透過prop設定它們的屬性。

方法一:jQuery程式碼:

//定义标识,true表示选中
        var chkall = true;
        $(function () {
            //全选按钮设置点击事件
            $("#btnAll").click(function () {
                //1、循环设置其它多选框选中状态,跟标识用的变量一样
                $(".fruit").prop("checked", chkall);
                //2、标识的变量取反
                chkall = !chkall;
            })
        })
登入後複製

方法二思路:透過表單過濾器取得所有的單選框,再循環設定checked屬性。

方法二:jQuery程式碼:

$(function () {
                //得到全选框的值
                var $checked = this.checked;
                //通过表单过滤器得到所有单选框
                $("input[class=fruit]").each(function () {
                    //单选框的值与全选框的值保持一致
                    this.checked = $checked;
                })
            })
        })
登入後複製

最後補充說明:JQuery一般取得屬性我們會用Attr,設定屬性的值我們用prop.

推薦學習:《 jquery影片教學

以上是jquery怎麼實作取反方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板