jquery实现复选框的全选、全不选、反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style> </style>
</head>
<body>
选择喜欢的运动<input type="checkbox">全选
<br/>
<input type="checkbox" class="item">篮球
<input type="checkbox" class="item">足球
<input type="checkbox" class="item">羽毛球
<input type="checkbox" class="item">冰棒球
<br/>
<button id="selectAll">全选</button>
<button id="notSelect">全不选</button>
<button id="reverseSelect">反选</button> <script src="../js/vendor/jquery-3.2.1.min.js"></script>
<script>
var $lis=$("[type=checkbox]:first")
var $items=$(".item");
$("#selectAll").click(function(){
$items.prop("checked",true);
$lis.prop("checked",true);
});
$("#notSelect").click(function(){
$items.prop("checked",false);
$lis.prop("checked",false);
});
$("#reverseSelect").click(function(){
$items.each(function(){
this.checked=!this.checked;
});
$lis.prop("checked",$items.not(":checked").length===0)
});
$lis.click(function(){
$items.prop("checked",this.checked);
})
$items.click(function(){
$lis.prop("checked",$items.not(":checked").length===0)
}) </script>
</body>
</html>
jquery实现复选框的全选、全不选、反选的更多相关文章
- 复选框（checkbox）、多选框
1.需求分析 可同时选中多个选项,实现全选.全不选.反选等功能. 2.技术分析 基础的HTML.CSS.JavaScript. 3.详细分析 3.1 HTML部分 图示是一个列表加底部一段文字说明,列 ...
- Flutter学习(8)——CheckBox多选框使用及动态更改多选框数据
原文地址:Flutter学习(8)--CheckBox多选框使用及动态更改多选框数据 | Stars-One的杂货小窝 最近项目需求需要调整页面,记录一下实现过程 这次主要是要实现个评价页面,选择不同 ...
- jQuery对复选框（checkbox)的全选，全不选，反选等的操作
效果截图: HTML代码: <body><ul id="list"> <li><label><input type=" ...
- jQuery实现checkbox（复选框）选中、全选反选代码
谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...
- 复选框（checkox）全选、全不选、反选、获得选中项值的用例
HTML部分: <div class="all"> <ul> <li><input type="checkbox" v ...
- 组合框里添加复选框的方法（使用勾选的假象，用图片代替而已，并非QT原生支持）
组合框可以看作是列表框和文本框的组合,因其占据的空间少,使用操作方便,常被界面设计人员用于界面开发设计中,在有限个输入的条件下,组合框常用来代替文本框,这样从用户使用角度来看,更趋人性化,所见即所得. ...
- 复选框回显、全选、非全选、cookie处理数据、json数组对象转换处理学习笔记参考的页面
<%@include file="/common/head.jsp"%> <%@ page contentType="text/html; charse ...
- checkbox复选框，如何让其勾选时触发一个事件，取消勾选时不触发
<input type="checkbox" onclick="checkboxOnclick(this)" /> <script> f ...
- Java 多选框的全选、多选、反选（JQuery 实现）
jQuery 实现全选.多选.反选 学习内容: 需求 总结: 学习内容: 需求 jQuery 实现全选.多选.反选 实现代码 <!DOCTYPE html> <html lang=& ...
- 转载：Bootstrap之表格checkbox复选框全选
转:http://blog.csdn.net/shangmingchao[商明超的博客] 效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了: 版权声明:如需 ...
随机推荐
- Navicat 连接 Oracle数据库并，导入数据泵（.dmp）
如有什么质疑的地方,希望可以和大家一起探讨,共同进步. 一.安装方法: 1.首先下载Navicat Premium和Oracle Database Oracle Database官网下载地址:http ...
- No enum constant org.apache.ibatis.type.JdbcType.Integer
同事今天在用mybatis查询时候,报了上面这个问题.上网查了下,原来是mybatis封装类型的问题.原因是在resultMap中jdbcType写为了Integer,但是在MyBatis中没有这个数 ...
- hbase启动问题记录
昨天测试环境的Hbase启动有问题,日志中显示: transaction type: 1 error: KeeperErrorCode = NoNode for /hbase hmaster等其他进程 ...
- web前端与后端的理解区分
要了解web前后端的区别,首先必须得清楚什么是web前端和web后端. 首先:web的本意是蜘蛛网和网的意思,在网页设计中我们称为网页的意思.现广泛译作网络.互联网等技术领域.表现为三种形式,即超文本 ...
- Server runtime
spring mvc常用的注解: 个介绍. @Controller @Controller 负责注册一个bean 到spring 上下文中,bean 的ID 默认为 类名称开头字母小写,你也可以自己指 ...
- 通过u盘启动盘重装系统
前言:一直想通过u盘启动盘给旧本装个win7,但是发现网上完整的教程很少.这里分享给大家我重装的一些步骤和遇到的问题. 前期准备: 1.我们要准备一个容量在4G以上的U盘. 2.我们要将U盘中的重要数 ...
- PHP-FPM详解
目录 作用 安装 全局配置 配置进程池 参考Company开发环境 转发请求给PHP-FPM 思考 作用 PHP-FPM(PHP FastCGI Process Manager)意:PHP FastC ...
- xsd文件记录
<MESSAGE Version="1.0"> <CV_HEADER MsgType=" /> <QUERY_PROFILE> < ...
- Linux下打包压缩war、解压war包和jar命令
情景:把project_a文件夹下的文件打包成project.war 1. 打包 jar -cvf project.war /project_a 说明: -c 创建war包 -v 显示过程信息 -f ...
- ZT Android4.2关于bluetooth在HAL层的分析（1）
我的电子杂烩饭 http://blog.sina.com.cn/wuchuchu2012 [订阅][手机订阅] 首页 博文目录 图片 关于我 正文 字体大小:大 中 小 Android4.2关于blu ...