JQuery对checkbox的操作
对复选框组的全选、全不选、不全选,获取选中的复选框的值的操作
- 点击全选按钮,复选框组全部选中或者全部取消。
- 实现全选按钮和复选框组的联动,当复选框组中有一个没有被选中后,那么id=‘checkedAll’的全选按钮应该要取消选中;当复选框组全部选中后,全选按钮也应该被选中。
- 获取已选中的复选框的值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>对复选框组的全选操作</title> 6 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script> 7 <script type="text/javascript"> 8 $(function(){ 9 /*全选 10 全选cheched和下方的checkbox按钮的checked是一致的, 11 故可用this.checked。 12 注意:$(this).checked是错的 13 */ 14 $('#checkedAll').click(function() { 15 $('[name=item]:checkbox').prop('checked', this.checked); 16 }); 17 18 /*判断复选框的总数,是否和选中的复选框的数量相等 19 相等:全选了 20 不相等:没有全选 21 */ 22 $('[name=item]:checkbox').click(function() { 23 /*得到的是ul下 name=item 的复选框数组*/ 24 var $checkedArray = $('[name=item]:checkbox'); 25 /*$checkedArray.filter(':checked') -----> 已经选择的复选框 */ 26 $('#checkedAll').prop('checked',$checkedArray.length==$checkedArray.filter(':checked').length); 27 28 }); 29 }); 30 </script> 31 <script type="text/javascript"> 32 $(function () { 33 //获取已选的复选框的值 34 var checkedArray = new Array();//放已经选择的checkbox的value 35 var count;//已经选择的个数 36 $('#btn_submit').click(function() { 37 checkedArray.length=0; 38 count=0; 39 $('[name=item]:checkbox:checked').each(function() { 40 checkedArray.push($(this).val()); 41 count++; 42 }); 43 if (checkedArray.length==0) { 44 alert("Please check one at least."); 45 return; 46 } 47 confirm("已选复选框的值:"+checkedArray+"\n"+"选中的复选框个数:"+count); 48 }); 49 }) 50 </script> 51 </head> 52 <body> 53 <form action="#" method="POST"> 54 <input type="checkbox" id="checkedAll"><label for="checkedAll">全选</label> 55 <ul> 56 <li><input type="checkbox" name="item" value="basketball">篮球</li> 57 <li><input type="checkbox" name="item" value="football">足球</li> 58 <li><input type="checkbox" name="item" value="badminton">羽毛球</li> 59 <li><input type="checkbox" name="item" value="pingpong">兵乓球</li> 60 <li><input type="checkbox" name="item" value="swimming">游泳</li> 61 <li><input type="checkbox" name="item" value="running">跑步</li> 62 </ul> 63 <button type="button" id="btn_submit" value="提交button">提交</button> 64 </form> 65 </body> 66 </html>
对于代码中的不足,不够简洁的还可以再优化的地方,如果有什么更好的想法和实现方法,欢迎一起交流学习。
Write less, do more.
转载于:https://www.cnblogs.com/AuKing/p/7805846.html
JQuery对checkbox的操作相关推荐
- jQuery对checkbox的操作(转载)
$(document).ready(function(){//checkbox全选$('#btn1').click(function(){$("[name = 'checkbox']&quo ...
- JQuery对checkbox操作 (循环)
下面是Jquery对checkbox的一些操作,全选,反选,取消全选等等... View Code <%@ Page Language="C#" AutoEventWireu ...
- JQuery对CheckBox的一些相关操作
一.通过选择器选取CheckBox: 1.给CheckBox设置一个id属性,通过id选择器选取: <input type="checkbox" name="myB ...
- jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)
第一章 认识jQuery jQuery代码风格 $(document).ready(function(){ //... }); 简化 $(function(){ //... }); jQuery对象转 ...
- Jquery基础之DOM操作
Jquery基础之DOM操作 Dom是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DO ...
- jQuery中HTML的操作
jQuery中HTML的操作 创建元素的方式 jQuery中创建元素的方式: 1.$("标签的代码") 2.对象.html("标签的代码"); var aObj ...
- jquery系列教程3-DOM操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...
- jquery 表格分页等操作实现代码(pagedown,pageup)
jquery 表格分页等操作实现代码(pagedown,pageup) 没什么技术含量,先上图: 思路: 1:获取按键 2:判断当前表格行的位置 HTML结构: 复制代码 代码如下: <div ...
- Jquery全选系列操作(锋利的jQuery)
Jquery全选系列操作(锋利的jQuery) <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...
最新文章
- bootstrap3 表单构建器_实例演示:如何构建高可用的微服务架构
- Progressive Web App是一个利用现代浏览器的能力来达到类似APP的用户体验的技术——不就是chrome OS吗?...
- python往mysql存入数据_Python操作mysql之插入数据
- chrome 网页重新加载_在Chrome中为各个网页设置自定义重新加载时间
- linux 系统安装mongodb数据库---方法1
- 设计模式——简单工厂
- 顺利通过2018年下工信部的软件设计师考试,在此感悟一下
- numpy 加速 矩阵相加_Numpy知识
- 【Linux】Linux 守护进程的启动方法
- 【题解】最近公共祖先
- django2.0media用户上传文件配置及使用方法
- AAAI'22 | 基于情感分析的开放域对话系统
- C++定时器和时间轮
- 路由器mac地址克隆
- 点击折叠菜单(HTML/CSS/JS)
- php吧输出结果进行分割,[判断题] 呼叫处理程序按照一定的逻辑对呼叫进行处理,对呼叫的处理结果与局数据、用户数据的内容无关。...
- 画业务逻辑流程图后的感想
- 深入理解React:懒加载(lazy)实现原理
- 腾讯通报内部反腐情况:开出48人惩治名单;华为预计2022年全员每股分红1.61元;Chromium使用Rust语言|极客头条
- CentOS7-安装防火墙
热门文章
- IceStorm src simple analyse
- Nginx动态路由的新姿势:使用Go取代lua
- 【quickhybrid】H5和Native交互原理
- 补天白帽大会:无处不在的无线电攻击
- 电力“十三五”蓝图发布 新能源迎发展机遇
- 解决eclipse中java项目导出成jar包后读写UTF-8文件中文乱码问题
- Careercup | Chapter 4
- 统计学习方法|感知机原理剖析及实现
- python x y z 1_Python下的数值列表 - range(x,y,z)函数
- 『树上匹配 树形dp』