文档章节

jQuery全选、全不选、反选

李金文前端
 李金文前端
发布于 2016/04/08 01:36
字数 296
阅读 5
收藏 0
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <script src="../js/jquery1.8.3.min.js"></script>    
 6         <title>表单操作-checkbox</title>
 7         <style>
 8             *{margin:10px}
 9         </style>
10     </head>
11     <body>
12         <form method="post" action="">
13                你爱好的运动是?
14             <br/>
15             <input type="checkbox" name="items" value="足球" id="zq"/><label   for="zq">  足球</label>
16             <input type="checkbox" name="items" value="篮球" id="lq"/><label   for="lq">  篮球</label> 
17             <input type="checkbox" name="items" value="羽毛球" id="ymq"/><label for="ymq">羽毛球</label> 羽毛球
18             <input type="checkbox" name="items" value="乒乓球" id="ppq"/><label for="ppq">乒乓球</label> 
19             <br/>
20             <input type="button" id="CheckedAll" value="全 选"/>
21             <input type="button" id="CheckedNo" value="全不选"/>
22             <input type="button" id="CheckedRev" value="反 选"/> 
23         
24             <input type="button" id="send" value="提 交"/> 
25         </form>
26         <script>
27             $(function(){
28                 //全选
29                 $("#CheckedAll").click(function(){
30                     $("input[name=items]").attr("checked",true);
31                 });
32                 //全不选
33                 $("#CheckedNo").click(function(){
34                     $("input[name=items]").attr("checked",false);
35                 });
36                 
37                 //反选
38                 $("#CheckedRev").click(function(){
39                     //checkbox
40                     var checkElem = $("input[name=items]");
41                     /**方法一:
42                     for(var i = 0; i<checkElem.length;i++){
43                         checkElem[i].checked = !checkElem[i].checked;
44                     }
45                     **/
46                     //方法二:
47                     checkElem.each(function(){
48                         this.checked = !this.checked;
49                     });
50                     /**方法三:
51                     checkElem.each(function(){
52                         if($(this).attr("checked")){
53                             $(this).attr("checked",false);
54                         }else{
55                             $(this).attr("checked",true);
56                         }
57                     });
58                     **/
59                 });
60             })
61         </script>
62     </body>
63 </html>

 

© 著作权归作者所有

李金文前端
粉丝 0
博文 6
码字总数 2239
作品 0
海淀
程序员
私信 提问
jQuery实现全选/全不选只执行一次?

为什么jquery实现全选/全不选只执行一次,就不执行了是什么原因? jquery: html:

小米1120
2015/08/10
369
7
jQuery 1.9版本以上多次点击checkbox无法选中的问题

问题描述:全选功能 代码: $("input[name='onday[]']").each(function(){ }); 第一次 全选和全不选 能很好的工作,但第二次开始 不能全选 将checked改为 true false也不好使 网搜之,说是j...

qingfeng哥
2015/11/06
125
0
jQuery对表单、表格的操作及更多的应用

jQuery对表单、表格的操作及更多的应用 1 表单应用 一个表单有3个基本组成部分。 (1) 表单标签:包含处理表单数据所用的服务器端应用程序URL以及数据提交到服务器的方法 (2) 表单域:包含文本...

zhangda89
2011/10/07
426
0
奇葩问题——jquery操作checkbox的 checked属性

最近做checkbox,遇到一个奇葩问题,如下: <!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript" src="jquery-1.9.1.js"></......

seth_y
2014/04/16
68
0
JQuery(学习笔记六)JQuery常用实例

几个简单例子的实现 (一)表格隔行变色 效果: (2)多Tab点击切换 效果: 三、导航动态显示效果 效果: 四、爱好选择器 效果: 五、添加删除记录 六、焦点轮播图 效果:

一枝韩独秀
2018/09/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

64.监控平台介绍 安装zabbix 忘记admin密码

19.1 Linux监控平台介绍 19.2 zabbix监控介绍 19.3/19.4/19.6 安装zabbix 19.5 忘记Admin密码如何做 19.1 Linux监控平台介绍: 常见开源监控软件 ~1.cacti、nagios、zabbix、smokeping、ope...

oschina130111
今天
10
0
当餐饮遇上大数据,嗯真香!

之前去开了一场会,主题是「餐饮领袖新零售峰会」。认真听完了餐饮前辈和新秀们的分享,觉得获益匪浅,把脑子里的核心纪要整理了一下,今天和大家做一个简单的分享,欢迎感兴趣的小伙伴一起交...

数澜科技
今天
7
0
DNS-over-HTTPS 的下一代是 DNS ON BLOCKCHAIN

本文作者:PETER LAI ,是 Diode 的区块链工程师。在进入软件开发领域之前,他主要是在做工商管理相关工作。Peter Lai 也是一位活跃的开源贡献者。目前,他正在与 Diode 团队一起开发基于区块...

红薯
今天
8
0
CC攻击带来的危害我们该如何防御?

随着网络的发展带给我们很多的便利,但是同时也带给我们一些网站安全问题,网络攻击就是常见的网站安全问题。其中作为站长最常见的就是CC攻击,CC攻击是网络攻击方式的一种,是一种比较常见的...

云漫网络Ruan
今天
11
0
实验分析性专业硕士提纲撰写要点

为什么您需要研究论文的提纲? 首先当您进行研究时,您需要聚集许多信息和想法,研究论文提纲可以较好地组织你的想法, 了解您研究资料的流畅度和程度。确保你写作时不会错过任何重要资料以此...

论文辅导员
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部