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 相关文章推荐
JS删除数组元素的函数介绍
Mar 27 Javascript
jquery 获取标签名(tagName)示例代码
Jul 11 Javascript
jQuery中slideUp 和 slideDown 的点击事件
Feb 26 Javascript
纯js实现重发验证码按钮倒数功能
Apr 21 Javascript
AngularJS Controller作用域
Jan 09 Javascript
jquery.validate表单验证插件使用详解
Jun 21 jQuery
你点的 ES6一些小技巧,请查收
Apr 25 Javascript
webpack4 处理SCSS的方法示例
Sep 03 Javascript
koa大型web项目中使用路由装饰器的方法示例
Apr 02 Javascript
vue.js中使用echarts实现数据动态刷新功能
Apr 16 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
Sep 27 Javascript
JS数组splice操作实例分析
Oct 12 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二维数组排序的函数分享
2014/01/17 PHP
PHP递归算法的简单实例
2019/02/28 PHP
My Desktop :) 桌面式代码
2008/12/29 Javascript
jQuery 学习 几种常用方法
2009/06/11 Javascript
js打印纸函数代码(递归)
2010/06/18 Javascript
js 函数的副作用分析
2011/08/23 Javascript
自己动手开发jQuery插件教程
2011/08/25 Javascript
javascript的console.log()用法小结
2012/05/31 Javascript
使用JavaScript构建JSON格式字符串实现步骤
2013/03/22 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
bootstrap的工具提示实例代码
2017/05/17 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
Vue实现移动端页面切换效果【推荐】
2018/11/13 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python与shell的3种交互方式介绍
2015/04/11 Python
Python 记录日志的灵活性和可配置性介绍
2018/02/27 Python
python tornado修改log输出方式
2019/11/18 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
Python如何定义一个函数
2015/09/01 面试题
女大学生自我鉴定
2013/12/09 职场文书
《陶罐和铁罐》教学反思
2014/02/19 职场文书
行政助理工作职责范本
2014/03/04 职场文书
收款委托书范本
2014/09/11 职场文书
基层党建工作简报
2015/07/21 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python