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 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
JQUERY复选框CHECKBOX全选,取消全选
Aug 30 Javascript
使用jquery解析XML的方法
Sep 05 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 Javascript
基于JavaScript实现添加到购物车效果附源码下载
Aug 22 Javascript
js前端面试题及答案整理(一)
Aug 26 Javascript
浅谈移动端之js touch事件 手势滑动事件
Nov 07 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
Oct 12 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
js轮播图之旋转木马效果
Oct 13 Javascript
vue中axios封装使用的完整教程
Mar 03 Vue.js
TypeScript实用技巧 Nominal Typing名义类型详解
Sep 23 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快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
php生成二维码时出现中文乱码的解决方法
2014/12/18 PHP
基于php的微信公众平台开发入门实例
2015/04/15 PHP
php单例模式的简单实现方法
2016/06/10 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
2009/04/10 Javascript
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
2010/03/09 Javascript
突发奇想的一个jquery插件
2010/11/19 Javascript
DIY jquery plugin - tabs标签切换实现代码
2010/12/11 Javascript
JQuery 设置checkbox值二次无效的解决方法
2016/07/22 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
jQuery提示框插件SweetAlert用法分析
2019/08/05 jQuery
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
python的即时标记项目练习笔记
2014/09/18 Python
让 python 命令行也可以自动补全
2014/11/30 Python
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
python轻松查到删除自己的微信好友
2016/01/10 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
python如何求解两数的最大公约数
2018/09/27 Python
Python实现Linux监控的方法
2019/05/16 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
Python如何输出整数
2020/06/07 Python
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
阿联酋航空假期:Emirates Holidays
2018/03/20 全球购物
新闻记者个人求职的自我评价
2013/11/28 职场文书
家长对孩子的寄语
2015/02/26 职场文书
施工安全保证书
2015/05/09 职场文书
小学主题班会教案
2015/08/17 职场文书
导游词之澳门玫瑰圣母堂
2019/12/03 职场文书