1、在系统后台进行人员管理时，进行批量删除，使用jq完成全选和全不选

步骤分析：

第一步：引入jquery文件

第二步：书写页面加载函数

第三步：为上面的复选框绑定单击事件

第四步：将下面所有的复选框的选中状态设置成跟上面的一致！

2、具体代码实现：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>使用jQuery完成复选框的全选和全不选</title>

         <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>

         <script>

             $(function(){

                 $("#select").click(function(){

                     //获取下面所有的复选框并将其选中状态设置跟编码的前端复选框保持一致

                     //attr的方法与JQ的版本有关，在1.8.3及以下有用

                     //$(".selectOne").attr("checked",this.checked);

                     $(".selectOne").prop("checked",this.checked);

                 });

             });

         </script>

     </head>

     <body>

         <table border="1" width="500" height="50" align="center" id="tbl" >

             <thead>

                 <tr>

                     <td colspan="4">

                         <input type="button" value="添加" />

                         <input type="button" value="删除" />

                     </td>

                 </tr>

                 <tr>

                     <th><input type="checkbox" id="select"></th>

                     <th>编号</th>

                     <th>姓名</th>

                     <th>年龄</th>

                 </tr>

             </thead>

             <tbody>

                 <tr >

                     <td><input type="checkbox" class="selectOne"/></td>

                     <td>1</td>

                     <td>张三</td>

                     <td>22</td>

                 </tr>

                 <tr >

                     <td><input type="checkbox" class="selectOne"/></td>

                     <td>2</td>

                     <td>李四</td>

                     <td>25</td>

                 </tr>

                 <tr >

                     <td><input type="checkbox" class="selectOne"/></td>

                     <td>3</td>

                     <td>王五</td>

                     <td>27</td>

                 </tr>

                 <tr >

                     <td><input type="checkbox" class="selectOne"/></td>

                     <td>4</td>

                     <td>赵六</td>

                     <td>29</td>

                 </tr>

                 <tr >

                     <td><input type="checkbox" class="selectOne"/></td>

                     <td>5</td>

                     <td>田七</td>

                     <td>30</td>

                 </tr>

                 <tr >

                     <td><input type="checkbox" class="selectOne"/></td>

                     <td>6</td>

                     <td>汾九</td>

                     <td>20</td>

                 </tr>

             </tbody>

         </table>

     </body>

 </html>

注意：attr在jquery1.11版本不适用，采用prop()来替代(在各个版本都适用)。

jQuery学习(五)——使用JQ完成复选框的全选和全不选的更多相关文章

  1. springMvc接收ajax数组参数，以及jquery复选框选中、反选、全选、全不选

    一.复选框选中.反选.全选.全不选 html代码: <input type='checkbox' name='menuCheckBox' value='10' >苹果 <input ...

  2. ExtJS4.2学习(五)表格渲染与复选框

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-10/174.html --------------- ...

  3. JQuery的复选框选中、取消、全选，全不选问题

    一.必须引入JQuery库: 下面是js代码: /*** * 服务管理块>>>复选框事件处理 */ //服务管理复选框被选中.取消$(function(){ $("#Ser ...

  4. php处理表单中的复选框问题以及js实现全选

    做的一个项目中遇到了全选和取消全选的问题,这是一个很普遍的功能,,虽然我们经常用到,但是真正做起来却发现行不通,在网上找了些,大部分都是ie,但是谷歌内核浏览器不能正常实现,所以经过小小的调整,今天就 ...

  5. 转发！HTML 复选框 checkbox 的 JavaScript 的全选和全反选

    checkbox 或者按钮实现 form 内的 checkbox 全选或者反选,代码很简单,全部代码如下: <html> <head> <meta http-equiv= ...

  6. [oldboy-django][2深入django]老师管理 -- form表单如何生成多选框标签，多选框的默认值显示，以及多选框数据插入到数据库，多选框数据更改到数据库

    1 form表单如何生成多选框(包含了多选框可选择内容) - Form设置班级输入框为 select多选 - 多选 class TeacherForm(Form): name = fields.Cha ...

  7. jQuery学习(六)——使用JQ完成省市二级联动

    1.JQ的遍历操作 方式一: 1 $(function(){ //全选/全不选 $("#checkallbox").click(function(){ var isChecked= ...

  8. jquery学习笔记3——jq HTML

    jQuery最常用的部分就是操作DOM,jQuery提供了一系列操作DOM的相关方法,使其很容易: 一.获取 1.获取内容 text()方法    设置或返回所选元素的文本内容: html()方法   ...

  9. jquery学习笔记2——jq效果

    一.显示隐藏: 可以使用show()和hide()方法来显示隐藏: $("#hide").click(function(){ $("p").hide(); }) ...

随机推荐

  1. 【转】C#详解值类型和引用类型区别

    通用类型系统 值类型 引用类型 值类型和引用类型在内存中的部署 1 数组 2 类型嵌套 辨明值类型和引用类型的使用场合 5 值类型和引用类型的区别小结   首先,什么是值类型,什么是引用类型? 在C# ...

  2. sql导出到excel

    1.先查询数据ID,别名  导出到excel 2.增加标准名称,标识错误数据,导入sqlServer select distinct [StandardName] from [GMSOA].[dbo] ...

  3. SpringBoot(六) SpirngBoot与Mysql关系型数据库

    pom.xml文件的配置 <dependency> <groupId>org.springframework.boot</groupId> <artifact ...

  4. dragView 屏幕拖拽并且弹出菜单的控件

    dragView 因项目新需求需要添加一个屏幕拖拽按钮可以弹出菜单的控件,因为不是我做的闲来无事写一个demo吧 可能存在一些小bug(毕竟就写了几个小时)兄弟姐妹们理解思路就行 具体的可以自己调试一 ...

  5. 快速新建一个纯净的java pom项目 project

    前期的java环境安装就不再阐述了使用步骤java -jar project-creator-0.1.jar projectName [war] 1> 比如你要创建一个项目名字叫 smile-o ...

  6. TESTUSERB 仅能对TESTUSERA 用户下的某些表增删改查、有些表仅能对某些列update，查询TESTUSERB 用户权限，获取批量赋予语句。

    TESTUSERB 仅能对TESTUSERA 用户下的某些表增删改查.有些表仅能对某些列update,查询TESTUSERB 用户权限,获取批量赋予语句. select 'grant '|| PRIV ...

  7. TF基础2

    1.常用API 1.图,操作和张量 tf.Graph,tf.Operation,tf.Tensor 2.可视化 TensorBoard 3.变量作用域 在TF中有两个作用域(scope),一个是nam ...

  8. GDB Layout

    layout:用于分割窗口,可以一边查看代码,一边测试.主要有以下几种用法:layout src:显示源代码窗口layout asm:显示汇编窗口layout regs:显示源代码/汇编和寄存器窗口l ...

  9. BZOJ 1834: [ZJOI2010]network 网络扩容 最小费用流_最大流_残量网络

    对于第一问,跑一遍最大流即可. 对于第二问,在残量网络上的两点间建立边 <u,v>,容量为无限大,费用为扩充费用. 跑一遍最小费用流即可. Code: #include <vecto ...

  10. tinymce原装插件源码分析（七）-使能css、script

    在tinymce中使用css个script tinymce的编辑器中css和script默认是不起作用的.(编辑器主要面向写文章使用,考虑到xss攻击,默认是不启用的) 需要修改tinymce.js中 ...