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

前面介绍了利用JavaScript实现全选功能,其中也有要注意的几点,现在讲解下在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.

上一篇:MySQL架构优化:定时计划任务与表分区


下一篇:CentOS7卸载OpenJDK,并安装Oracle官方JDK