jquery实现全选，反选，取消的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="checkAll()"/>
<input type="button" value="反选" onclick="notCheck()"/>
<input type="button" value="取消" onclick="notCheckAll()"/>
<table border="1">
<thead>
<tr>
<th>选项</th>
<th>ip</th>
<th>端口</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>20012</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>20012</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>20012</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>20012</td>
</tr>
</tbody>
</table>
<script src="jquery.js"></script>
<script>
function checkAll() {
$('#tb :checkbox').prop('checked',true);
}
function notCheckAll(){
$('#tb :checkbox').prop('checked',false);
}
function notCheck() {
$('#tb :checkbox').each(function (k) {
// this,指代的是当前循环的每个元素
// 使用dom方法
// if(this.checked){
// this.checked=false
// }else{this.checked=true;}
// 使用jquery的第一种方式：
// if($(this).prop('checked')){
// $(this).prop('checked',false)
// }else{$(this).prop('checked'),true;}
// 使用三元运算进一步精简版的jquery实现方式
var v= $(this).prop('checked')?false:true;
$(this).prop('checked',v);
})
}
</script>
</body>
</html>
jquery实现全选，反选，取消的操作的更多相关文章
- python: jquery实现全选 反选 取消
引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...
- jquery实现全选 反选 取消
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery实现全选，取消，反选的功能&实现左侧菜单
1.全选,取消,反选的例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- jquery 书写全选反选功能
书写一个后台管理中用到的全选反选功能.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- jQuery --checkbox全选和取消全选简洁高效的解决办法
最近在公司做了一个小项目,其中有一个全选和取消全选的这么一个模块,搞了半天找不到一种最佳的解决方案!后来通过各种努力找到了一种简洁高效的解决办法,这里想和大家分享一下.有问题的话,还望各路大神指导一二 ...
- jquery实现全选/反选功能
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...
- jquery购物车全选，取消全选，计算总金额
这是html代码 <div class="gwcxqbj"> <div class="gwcxd center"> <div cl ...
- jQuery实现全选/反选和批量删除
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncod ...
- jquery实现全选、取消反选、加JavaScript三元运算（三种法法实现反选）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery 实现全选反选
jquery代码 $(function () { $('#inputCheck').click(function () { if ($(this).attr("checked")) ...
随机推荐
- alert(1) to win 6
function escape(s) { // Slightly too lazy to make two input fields. // Pass in something like " ...
- bzoj2306 [Ctsc2011]幸福路径 倍增 Floyd
题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=2306 题解 倍增 Floyd. 令 \(f[i][j][k]\) 表示走了 \(2^i\) 步 ...
- Thread类与Runnable接口
Runnable 先看看源码中对Runnable的声明 @FunctionalInterface public interface Runnable { /** * When an object im ...
- home home clock
博客园添加home home clock 将下面代码复制进博客侧边栏广告即可 <div id="myTime"> <object classid="cl ...
- kafka docker-composer.yml
使用Docker快速搭建Kafka开发环境 表现力 关注 0.5 2018.05.04 03:00* 字数 740 阅读 25240评论 1喜欢 11 Docker在很多时候都可以帮助我们快速搭建想 ...
- JVM内存结构从永久代到元空间
在文章<JVM之内存结构详解>中我们描述了Java7以前的JVM内存结构,但在Java8和以后版本中JVM的内存结构慢慢发生了变化.作为面试官如果你还不知道,那么面试过程中是不是有些露怯? ...
- java基础复习（四）
---恢复内容开始--- 一.for循环的掌握 语法格式: for( 初始化语句A ; 条件判断B ; 循环后功能语句C){ //循环体D } for的执行流程: 整个for循环结构中 ...
- uiautomator2 使用注意的地方
uiautomator2项目地址:https://github.com/openatx/uiautomator2#basic-api-usages 下面记录一些自己在使用过程中的坑,仅供参考 1.通过 ...
- 【leetcode】1073. Adding Two Negabinary Numbers
题目如下: Given two numbers arr1 and arr2 in base -2, return the result of adding them together. Each nu ...
- dijkstra求最小环
任意一个环的权值,我们都可以看成两个有边相连的结点i.j的直接距离加上i.j间不包含边(边i->j)的最短路径. 求最短路径我们第一个想到的就是Dijkstra算法. 而Dijkstra所求的是 ...