jQuery实现全选、全不选以及反选操作
在写购物车案例时实现全选操作使用的是js的getAttribute()setAttribute()方法获取checked属性的值是undefined实现完成之后全选操作,如果在全选中的情况下改变其中一个的状态再点击全选,之前被取消的将不在被选中。之后使用js的DOM.checked属相的获得是true或false,操作很方便,很完美没有bug。
学了jquery后单独实现下全选、全不选、反选操作。
代码,如下:
1 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h3>我的爱好</h3>
<ul>
<li>
<input type="checkbox" class="sAll"/>全选 <input type="checkbox" class="sNone"/>全不选
<input type="checkbox" class="Inverse"/>反选
</li>
<li><input type="checkbox" class="check"/>篮球</li>
<li><input type="checkbox" class="check"/>足球</li>
<li><input type="checkbox" class="check"/>排球</li>
<li><input type="checkbox" class="check"/>羽毛球</li>
<li><input type="checkbox" class="check"/>乒乓球</li> </ul>
<script src="jquery.js"></script>
<script>
/*全选*/
//1.拿到全选复选框的jquery对象调用change(),当前对象的状态改变时进行下面操作
$('.sAll').change(function () {
//2.拿到所有class属相值为check的对象,将其checked属性值设置为true。
$('.check').attr('checked',true); //点击全选,全不选、反选其中一个时其它两的选中状态清除
$('.sNone').attr('checked',false);
$('.Inverse').attr('checked',false);
});
//alert($('.sAll').attr('checked'));
/*全不选*/
$('.sNone').change(function () {
$('.check').attr('checked',false); //点击全选,全不选、反选其中一个时其它两的选中状态清除
$('.sAll').attr('checked',false);
$('.Inverse').attr('checked',false);
});
/*反选*/
//注意:attr()方法取第一个的值 ,赋值所用
$('.Inverse').change(function () {
//遍历所有要操作的复选框
$('.check').each(function () {
//如果该复选框的checked属性为true,则改为false,反之为true
if($(this).attr('checked')){
$(this).attr('checked',false);
}else{
$(this).attr('checked',true);
} });
//将全选和全不选的状态去掉(点击全选,全不选、反选其中一个时其它两的选中状态清除)
$('.sAll').attr('checked',false);
$('.sNone').attr('checked',false);
});
</script>
</body>
</html>
jQuery实现全选、全不选以及反选操作的更多相关文章
- jQuery/javascript实现全选全不选
<html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...
- jQuery实现Checkbox中项目开发全选全不选的使用
<html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...
- 利用jQuery实现CheckBox全选/全不选/反选
转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...
- jquery的全选/全不选/反选以及attr添加checked属性失败的解决办法
如下图: <head> <title></title> <style type="text/css"> div { border: ...
- jquery之全选全不选
<input type="checkbox" onclick="selall(this)" />全选/全不选 <input type=&quo ...
- 用jquery实现复选框全选全不选问题(完整版),在网络上怎么也找不到完整的解决方案,重要搞全了
首先准备jsp页面控件: 请选择您的爱好:<br> <input type="checkbox" id="all" name="se ...
- 用jQuery实现全选-全不选-反选的功能
临近过年,刚学IT没多久的小白在这里祝大家在新的一年里:新春快乐,月月赚钱,天天开心,时时快乐,分分精彩,秒秒幸福,事事顺利 古人云:学而时习之,不亦说乎. 学习后经常温习所学的知识,也是件令人愉悦的 ...
- jQuery实现全选、不选和反选功能
jQuery结合Font Awesome字体图标实现全选.不选和反选功能 Font Awesome字体图标链接地址:http://www.fontawesome.com.cn/faicons/ 效果: ...
- jquery实现全选、不选、反选的两种方法
在取复选框checkbox的属性checked属性值时,发现一个问题,就是当用attr取值时,真的为"checked",假的为"undefined";当用pro ...
随机推荐
- 验证两台机器已经建立的ssh互信
1.expect方法 #!/bin/bash checkTrust() { expect -c ' set timeout 2; spawn ssh $1 "expr 12345678 + ...
- jquery尺寸和jQuery设置和获取内容方法
一.jquery尺寸 jQuery 提供多个处理尺寸的重要方法: width() 设置或返回元素的宽度(不包括内边距.边框或外边距),括号中可填数值宽度参数,无单位 height() 设置或 ...
- oracle基础之游标的理解与使用
关于游标,首先要知道游标的定义. 游标,是内存中的一款区域,用来存放select的结果集 游标用来处理从数据库中检索的多行记录(使用select语句).利用游标,程序可以逐个的处理和遍历一次索引返回的 ...
- Linux下php-fpm进程过多导致内存耗尽问题
这篇文章主要介绍了解决Linux下php-fpm进程过多导致内存耗尽问题,需要的朋友可以参考下 最近,发现个人博客的Linux服务器,数据库服务经常挂掉,导致需要重启,才能正常访问,极其恶心,于是 ...
- 用windows公文包实现不同盘符两个文件文件夹文件同步
需求:磁盘D的文件夹A需同步到磁盘E 步骤: 1.在磁盘E中新建公文包B 2.将D盘的文件夹A复制到公文包B 3.修改文件夹A中的内容 4.选中公文包B,右键"全部更新"
- [Vijos 1768] 顺序对的值
顺序对的值 描述 给定一个序列a,a中任意两个元素都不等.如果i<j,且a[i]<a[j],则我们称a[i],a[j]为一个顺序对,这个顺序对的值是指a[i+1],a[i+2]…….a[j ...
- [BZOJ 1552] 排序机械臂
Splay大法是坠吼滴! 1552: [Cerc2007]robotic sort Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 436 Solved: ...
- Programming Assignment 1: WordNet
编程作业一 作业链接:WordNet & Checklist 我的代码:WordNet.java & SAP.java & Outcast.java 这是第二部分的编程作业,因 ...
- BZOJ 1013 球形空间产生器sphere 高斯消元
题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=1013 题目大意: 有一个球形空间产生器能够在n维空间中产生一个坚硬的球体.现在,你被困 ...
- CyclicBarrier和CountDownLatch笔记
一.CyclicBarrier的使用 Barrier是栅栏,障碍物的意思,这里将它理解为栅栏. Cyclic是重复利用的意思. CyclicBarrier:可重复利用的栅栏.这里附上官方文档的一句解释 ...