jQuery实现全选反选功能
废话不说,直接上代码!
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<title>Insert title here</title>
</head>
<body> <div style="margin: 20px;">
全选:<input type="checkbox" id="selectAll" onclick="selects1()">
</div> <div style="width:600px;height: 40px;border: 1px solid #ccc">
多选框1:<input type="checkbox" class="check_class">
多选框2:<input type="checkbox" class="check_class">
多选框3:<input type="checkbox" class="check_class">
多选框4:<input type="checkbox" class="check_class">
多选框5:<input type="checkbox" class="check_class">
多选框6:<input type="checkbox" class="check_class">
</div><br> <script type="text/javascript"> /*
* 方法1 在工作电脑和本地电脑都可以正常工作
* 方法2 在工作电脑只起一次作用,即勾选全选,反选后。再次勾选,不再起作用。本地电脑一样可以正常运行
* 可能原因是jquery版本问题 ? 工作电脑jQuery版本为1.11系列。这里为3.1.1
*/ //实现方法1
function selects1(){
//实现全选,反选功能
var selectStatus = $('#selectAll').is(':checked');
$('.check_class').each(function(){
$(this).prop('checked',selectStatus);
});
} //实现方法2
function selects2(){
//实现全选,反选功能
var selectStatus = $('#selectAll').is(':checked');
$('.check_class').each(function(){
$(this).attr('checked',selectStatus);
});
} </script>
</html>
jQuery实现全选反选功能的更多相关文章
- jquery 书写全选反选功能
书写一个后台管理中用到的全选反选功能.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- jquery实现全选/反选功能
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...
- python: jquery实现全选 反选 取消
引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...
- JavaScript 实现全选 / 反选功能
JavaScript 实现全选 / 反选功能 版权声明:未经授权,内容严禁转载! 构建主体界面 编写 HTML 代码 和 CSS 代码,设计主题界面 <style> #user { wid ...
- JS全选反选功能
总选框:<input type="checkbox" class="all" name="all"> 子选框: <inpu ...
- jQuery实现全选/反选和批量删除
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncod ...
- JQuery实现列表中复选框全选反选功能封装
我们在做列表的时候经常会遇到全选,反选进行批量处理问题,例如: 我当时就是简单的实现了,然后想封装到公共的js中,封装的太烂,不好意思贴出来了(就是把实现代码之间放到公共js中,然后每个页面都用固定的 ...
- C# WinForm中实现CheckBox全选反选功能
今天一群里有人问到这个功能,其实应该挺简单,但提问题的人问题的出发点并没有描述清楚.因此,一个简简单单的需求,就引起了群内热烈的讨论.下面看看这个功能如何去实现,先上效果: 下面直接上代码,请不要在意 ...
- jquery 实现全选反选
jquery代码 $(function () { $('#inputCheck').click(function () { if ($(this).attr("checked")) ...
随机推荐
- storm源码剖析(2):storm的配置项
storm的配置项,可以从backtype/storm/Config.java中找到所有配置项及其描述
- 暑假集训Chapter1 贪心
为什么要今天写呢? 明天全力研究Johnson和一些奇奇怪怪的贪心 今天把能写的都写了 T1T2太水了直接上代码吧 #include<bits/stdc++.h> #define LL l ...
- HihoCoder1673 : 01间隔矩阵([Offer收割]编程练习赛41)(单调队列)
描述 给定一个N × M的01矩阵,小Hi希望从中找到一个01间隔的子矩阵,并且子矩阵的面积越大越好. 例如对于 0101010 1000101 0101010 1010101 0101010 在右侧 ...
- sangfor-AF 地址转换以及各种模式理解(路由,透明,虚拟网线,混合模式)
目的地址转换: 1.路由其实很简单的,其实你可以理解为路由器就好了2.透明和虚拟网线的区别:虚拟网线不对数据做任何的处理,你可以理解为不封装不拆包,直接丢给对端.而透明不一样,透明你可以把设备当做是交 ...
- MySQL业务-发放的优惠券 用户使用情况_20161028
运营部门给用户发放优惠券,如果想监控优惠券的使用效果 优惠券使用率是个反映效果的很好指标 下面sql就是针对某天对特定用户发放的优惠券在发放日期以后每天的使用情况 SELECT e.城市,e.用户ID ...
- CDN网络原理
1.用户向浏览器输入www.web.com这个域名,浏览器第一次发现本地没有dns缓存,则向网站的DNS服务器请求: 2.网站的DNS域名解析器设置了CNAME,指向了www.web.51cdn.co ...
- VijosP1250:分组背包
背景 Wind设计了很多机器人.但是它们都认为自己是最强的,于是,一场比赛开始了~ 描述 机器人们都想知道谁是最勇敢的,于是它们比赛搬运一些物品. 它们到了一个仓库,里面有n个物品,每个物品都有一个价 ...
- 6 git 生成SSH公钥/私钥 查看公钥
如果没有公钥的话就生成公钥私钥: $ ssh-keygen 然后连续回车(一次是位置,两次密码)
- SeetaFace教程(一) 在 VS 中的编译安装和环境配置
SeetaFace开源库由FaceDetection.FaceAlignment.FaceIdentification三部分组成.FaceDetection是在一副图片中检测出人脸区域,以一个方形区域 ...
- Ubuntu 12.04搭建hadoop单机版环境
前言: 本文章是转载的,自己又加上了一些自己的笔记整理的 详细地址请查看Ubuntu 12.04搭建hadoop单机版环境 Hadoop的三种运行模式 独立模式:无需任何守护进程,所有程序都在单个JV ...