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 相关文章推荐
Javascript var变量隐式声明方法
Oct 19 Javascript
jQuery提交多个表单的小例子
Jun 30 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
May 17 Javascript
JavaScript 异步调用
Oct 25 Javascript
Swiper自定义分页器使用详解
Dec 28 Javascript
Vue 获取数组键名的方法
Jun 21 Javascript
小程序实现带年月选取效果的日历
Jun 27 Javascript
微信网页授权并获取用户信息的方法
Jul 30 Javascript
深入解读VUE中的异步渲染的实现
Jun 19 Javascript
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
php面向对象全攻略 (七) 继承性
2009/09/30 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
PHP实现的支付宝支付功能示例
2019/03/26 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
jquery 插件开发备注
2010/08/27 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
JQuery中Ajax的操作完整例子
2017/03/07 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
jQuery实现div跟随鼠标移动
2020/08/20 jQuery
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
Python最基本的输入输出详解
2015/04/25 Python
介绍Python中的文档测试模块
2015/04/28 Python
Python的IDEL增加清屏功能实例
2017/06/19 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
牧马人澳大利亚官网:Wrangler澳大利亚
2019/10/08 全球购物
建筑施工实习自我鉴定
2013/09/19 职场文书
工程技术员岗位职责
2014/03/02 职场文书
高中军训感想300字
2014/03/04 职场文书
协议书怎么写
2014/04/21 职场文书
五一促销活动总结
2014/07/01 职场文书
关于长城的导游词
2015/01/30 职场文书
教师个人工作总结范文2015
2015/10/14 职场文书