首页 >web前端 >前端问答 >jquery怎么实现取反方法

jquery怎么实现取反方法

藏色散人
藏色散人原创
2021-11-19 11:12:312730浏览

jquery实现取反的方法:1、导入jQuery库;2、设置点击事件;3、循环设置其它多选框选中状态;4、通过“!chkall;”方式实现标识变量取反即可。

jquery怎么实现取反方法

本文操作环境:windows7系统、jquery-2.1.4版本、Dell G3电脑。

jquery怎么实现取反方法?

利用JQuery实现全选和反选的几种方法

如图:要实现的效果是点击全选框全部选中,再点击全部不选中

ae0d8e5437321be56da693a05c76897.png

方法一思路: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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn