复选框(checkox)全选、全不选、反选、获得选中项值的用例

HTML部分:
<div class="all"> <ul> <li><input type="checkbox" value="图书" /><sapn>图书</sapn></li> <li><input type="checkbox" value="动漫" /><sapn>动漫</sapn></li> <li><input type="checkbox" value="电影" /><sapn>电影</sapn></li> <li><input type="checkbox" value="小说" /><sapn>小说</sapn></li> <li><input type="checkbox" value="音乐" /><sapn>音乐</sapn></li> <li><input type="checkbox" value="游戏" /><sapn>游戏</sapn></li> <li><input type="checkbox" value="论坛" /><sapn>论坛</sapn></li> <li><input type="checkbox" value="运动" /><sapn>运动</sapn></li> </ul> <form action=""> <input type="checkbox" value="全选"> <input type="button" value="全选"> <input type="button" value="全不选"> <input type="button" value="反选"> <input type="button" value="获得选中项的值"> </form></div>
JS部分://全选var num = 0;$(".all form input[value='全选']").click(function(){ num++; if(num%2==0){ $(".all input[type='checkbox']").each(function(){ $(this).prop("checked",false); }) }else{ $(".all input[type='checkbox']").each(function(){ $(this).prop("checked",true); }) }});
//全不选$(".all form input[value='全不选']").click(function(){ $(".all input[type='checkbox']").each(function(){ $(this).attr("checked",false); })});//反选$(".all form input[value='反选']").click(function(){ if ($(".all form input[value='全选']").is(":checked")== true){ $(".all input[type=checkbox]").prop("checked",false); }else{ $(".all input[type=checkbox]").prop("checked",true); }});//获得选中项的值$(".all form input[value='获得选中项的值']").click(function(){ var vals = []; $(".all li input[type='checkbox']:checked").each(function(i,ele){ vals.push($(this).val()); }); alert(vals);})
复选框(checkox)全选、全不选、反选、获得选中项值的用例的更多相关文章
- 复选框(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=" ...
- 选中没有选中的复选框,匹配含有某个字符串的正则,json取值的两种方法,把变量定义在外面跟里面的区别
一.筛选没有选中的复选框:not("input:checked") 二.匹配有VARCHAR的字符串:".*VARCHAR.*?" 三.json取值的两种方法 ...
- 组合框里添加复选框的方法(使用勾选的假象,用图片代替而已,并非QT原生支持)
组合框可以看作是列表框和文本框的组合,因其占据的空间少,使用操作方便,常被界面设计人员用于界面开发设计中,在有限个输入的条件下,组合框常用来代替文本框,这样从用户使用角度来看,更趋人性化,所见即所得. ...
- Jquery 1.8全选反选删除选中项实现
JQuery1.6以后,Prop的出现,让1.6以下的全选反选效果全部失效了.以下是修正后的版本: 全选反选效果: $(".checkbox").click(function () ...
- ASP.NET MVC中使用MvcPager异步分页+在分页中复选框下一页上一页也保持选中
ASP.NET MVC 分页使用的是作者杨涛的MvcPager分页控件 地址:http://www.webdiyer.com/mvcpager/demos/ajaxpaging/ 这个分页控件在里面 ...
- 复选框回显、全选、非全选、cookie处理数据、json数组对象转换处理学习笔记参考的页面
<%@include file="/common/head.jsp"%> <%@ page contentType="text/html; charse ...
- checkbox 多选框 :jquery之全选、全不选、反选
javascriptjqueryselectAll [html] view plaincopy <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
随机推荐
- C#中日期记忆日期的格式化,日期格式化说明
参数format格式详细用法:格式字符 关联属性/说明 d ShortDatePattern D LongDatePattern f 完整日期和时间(长日期和短时间) F FullDateTimePa ...
- Unity3D移植到Windows phone8 遇到的点点滴滴
LitJson.JsonMapper:Type.GetInterface(String)=>Type.GetInterface(String,Boolean) protobuf应位于Assets ...
- windows8建立局域网的方法
win8建立局域网的方法:1.首先笔记本有无线网卡且支持 虚拟WIFI ;2.按win+X键,选择"命令提示符(管理员)A"; 3.输入"netsh wlan set h ...
- TSQL语句练习题
1. 查询Student表中的所有记录的Sname.Ssex和Class列. select Sname,Ssex,Class from Student 2. 查询教师所有的单位即不重复的Depart列 ...
- 配置 L2 Population - 每天5分钟玩转 OpenStack(114)
前面我们学习了L2 Population 的原理,今天讨论如何在 Neutron 中配置和启用此特性. 目前 L2 Population 支持 VXLAN with Linux bridge 和 VX ...
- jQuery源码 Ajax模块分析
写在前面: 先讲讲ajax中的相关函数,然后结合函数功能来具体分析源代码. 相关函数: >>ajax全局事件处理程序 .ajaxStart(handler) 注册一个ajaxStart事件 ...
- C++ 连接数据库的入口和获取列数、数据
这里不具体放出完整的程序,分享两个核心函数: 由于这里用到的函数是编译器自己的库所没有的,需要自己下载mysql.h库或者本地有数据库,可以去bin找到,放进去. 前提,我自己的测试数据库是WampS ...
- 总结JavaScript事件机制
JavaScript事件模型 在各种浏览器中存在三种事件模型: 原始事件模型 , DOM2事件模型 , IE事件模型. 其中原始的事件模型被所有浏览器所支持,而DOM2中所定义的事件模型目前被除了IE ...
- 根据起止日期构建指定查询条件:第N周(yyyy-MM-dd/yyyy-MM-dd)
项目中有个查询模块中用到查询条件: 年和周. 以往我直接指定是第几周,后来测试反映如果直接选择周的话并不知道所选周代表的年月日,而无法最快查询数据,后更改查询条件如下: 指定一个起始年月,根据起始年月 ...
- 用react的ReactCSSTransitionGroup插件实现简单的弹幕动画
1,开始的思路 公司想做直播方面的项目,并想加入弹幕的功能,直播的页面已经作为一个组件放在了用react+redux写好的一个网站项目上.所以技术老大让我研究下如何用react实现弹幕的功能.下面我就 ...