jquery 全选、全不选、反选效果的实现代码【推荐】


Posted in Javascript onMay 05, 2016

jquery 全选、全不选、反选效果的实现代码【推荐】 

首先:引入jquery

<title>haran.info_jquery实例_全选全不选反选_select-all_unselect-all_reverse</title>
<meta http-equiv="content-type"content="text/html; charset=UTF-8"/>
<script src="/js/jquery-1.8.3.min.js"type="text/javascript"></script><!-- 引入Jquery -->

样式:

<styletype="text/css">
<!--
#div1{
  width:980px;
  margin:0 auto;
  position:relative;
  text-align:left;
  padding-left:400px;
  line-height:30px;
  border:1px dotted #0075c5;
}
li{
  display:block;
  list-style:none;
  float:left;
  position:relative;
  padding-left:20px;
}
.clr{
  height:20px;
}
-->
</style>

body布局:

<divid="div1">
  <divclass="clr"> </div>
  <!--选项开始-->
  <inputtype="checkbox"/><ahref="haran.info">haran.info_脚本编程</a><br/> 
    
  <inputtype="checkbox"/><ahref="haran.info">haran.info_网站编程</a><br/> 
    
  <inputtype="checkbox"/><ahref="haran.info">haran.info_系统管理</a><br/> 
    
  <inputtype="checkbox"/><ahref="haran.info">haran.info_服务器配置</a><br/> 
    
  <inputtype="checkbox"/><ahref="haran.info">haran.info_系统运维</a><br/> 
    
  <inputtype="checkbox"/><ahref="haran.info">haran.info_博客</a><br/> 
    
  <inputtype="checkbox"/><ahref="haran.info">haran.info_首页</a><br/>
  <!--选项结束-->
  <!--功能按钮开始-->
  <inputtype="button"id="selAll"value="全选"/> 
    
  <inputtype="button"id="unselAll"value="全不选"/> 
    
  <inputtype="button"id="reverse"value="反选 "/> 
  <!--功能按钮结束-->
  <divclass="clr"> </div>
</div><!--关闭div1-->

实现功能:

<scripttype="text/javascript">
$(document).ready(function () {
      
  $("#selAll").click(function () { //":checked"匹配所有的复选
    $("#div1 :checkbox").attr("checked", true); //"#div1 :checked"之间必须有空格checked是设置选中状态。如果为true则是选中fo否则false为不选中
  });
      
  $("#unselAll").click(function () { 
    $("#div1 :checkbox").attr("checked", false); 
  });
      
  //理解用迭代原理each(function(){})
  $("#reverse").click(function () { 
  $("#div1 :checkbox").each(function () {
  $(this).attr("checked",!$(this).attr("checked")); //!$(this).attr("checked")判断复选框的状态:如果选中则取反
    }); 
  });
}); 
</script>

以上这篇jquery 全选、全不选、反选效果的实现代码【推荐】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
支持ie与FireFox的剪切板操作代码
Sep 28 Javascript
Extjs在exlipse中设置自动提示的方法
Apr 07 Javascript
javascript学习笔记(三)显示当时时间的代码
Apr 08 Javascript
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
Dec 16 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
May 08 Javascript
javascript实现youku的视频代码自适应宽度
May 25 Javascript
Bootstrap fileinput文件上传组件使用详解
Jun 06 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
如何管理Vue中的缓存页面
Feb 06 Vue.js
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 #Javascript
jquery实现全选功能效果的实现代码
May 05 #Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
May 05 #Javascript
animate 实现滑动切换效果【实例代码】
May 05 #Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 #Javascript
Sea.JS知识总结
May 05 #Javascript
在Node.js中使用Javascript Generators详解
May 05 #Javascript
You might like
PHP4之真OO
2006/10/09 PHP
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
PHP封装的HttpClient类用法实例
2015/06/17 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
php常用数组函数实例小结
2016/12/29 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
jquery dialog获取焦点的方法
2017/02/09 Javascript
vue-cli如何快速构建vue项目
2017/04/26 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
详解微信小程序开发用户授权登陆
2019/04/24 Javascript
js实现div色块碰撞
2020/01/16 Javascript
[55:45]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.24
2019/09/10 DOTA
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
numpy判断数值类型、过滤出数值型数据的方法
2018/06/09 Python
修改默认的pip版本为对应python2.7的方法
2018/11/06 Python
python制作朋友圈九宫格图片
2019/11/03 Python
python圣诞树编写实例详解
2020/02/13 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
毕业设计说明书
2014/05/07 职场文书
财务整改报告范文
2014/11/05 职场文书
导游词范文
2015/02/13 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
导游词之张家口
2019/12/13 职场文书
python基于tkinter制作无损音乐下载工具
2021/03/29 Python
多属性、多分类MySQL模式设计
2021/04/05 MySQL
深入浅析Redis 集群伸缩原理
2021/05/15 Redis
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL
十大公认最好看的动漫:《咒术回战》在榜,《钢之炼金术师》第一
2022/03/18 日漫