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 相关文章推荐
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
Apr 24 Javascript
js 页面关闭前的出现提示的实现代码
May 25 Javascript
js 3种归并操作的实例代码
Oct 30 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
jQuery中大家不太了解的几个方法
Mar 04 Javascript
基于jquery实现放大镜效果
Aug 17 Javascript
浅析Bootstrap缩略图组件与警示框组件
Apr 29 Javascript
js利用clipboardData实现截屏粘贴功能
Oct 12 Javascript
js实现上传文件添加和删除文件选择框
Oct 24 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
Jul 10 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 Javascript
JavaScript 绘制饼图的示例
Feb 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 中文字符入库或显示乱码问题的解决方法
2010/04/12 PHP
PHP 时间日期操作实战
2011/08/26 PHP
遍历指定目录下的所有目录和文件的php代码
2011/11/27 PHP
PHP实现恶意DDOS攻击避免带宽占用问题方法
2015/05/27 PHP
js加解密 脚本解密
2008/02/22 Javascript
IE和Firefox在JavaScript应用中的兼容性探讨
2008/04/01 Javascript
JavaScript Event学习第五章 高级事件注册模型
2010/02/07 Javascript
基于jquery的超简单上下翻
2010/04/20 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
微信小程序 Video API实例详解
2016/10/02 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
JS闭包的几种常见形式实例详解
2017/09/16 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
Ant Design Pro 之 ProTable使用操作
2020/10/31 Javascript
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
[45:25]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
numpy.delete删除一列或多列的方法
2018/04/03 Python
用python处理图片实现图像中的像素访问
2018/05/04 Python
python实现比较文件内容异同
2018/06/22 Python
详解python中的index函数用法
2019/08/06 Python
简单的Python调度器Schedule详解
2019/08/30 Python
Python3基本输入与输出操作实例分析
2020/02/14 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
西班牙家用电器和电子产品购物网站:Mi Electro
2019/02/25 全球购物
大学生个人总结的自我评价
2013/10/05 职场文书
奶茶店创业计划书
2014/08/14 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
税务会计岗位职责
2015/04/02 职场文书
党性教育心得体会(共6篇)
2016/01/21 职场文书
浅谈Golang 嵌套 interface 的赋值问题
2021/04/29 Golang