checkBox 全选、全不选、反选
checkBox的使用:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts/jquery-1.7.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { // 全选 $("#btnCheckAll").bind("click", function () { $("[name = chkItem]:checkbox").attr("checked", true); }); // 全不选 $("#btnCheckNone").bind("click", function () { $("[name = chkItem]:checkbox").attr("checked", false); }); // 反选 $("#btnCheckReverse").bind("click", function () { $("[name = chkItem]:checkbox").each(function () { $(this).attr("checked", !$(this).attr("checked")); }); }); // 全不选 $("#btnSubmit").bind("click", function () { var result = new Array(); $("[name = chkItem]:checkbox").each(function () { if ($(this).is(":checked")) { result.push($(this).attr("value")); } }); alert(result.join(",")); }); }); </script> </head> <body> <div> <input name="chkItem" type="checkbox" value="今日话题" />今日话题 <input name="chkItem" type="checkbox" value="视觉焦点" />视觉焦点 <input name="chkItem" type="checkbox" value="财经" />财经 <input name="chkItem" type="checkbox" value="汽车" />汽车 <input name="chkItem" type="checkbox" value="科技" />科技 <input name="chkItem" type="checkbox" value="房产" />房产 <input name="chkItem" type="checkbox" value="旅游" />旅游 </div> <div> <input id="btnCheckAll" type="button" value="全选" /> <input id="btnCheckNone" type="button" value="全不选" /> <input id="btnCheckReverse" type="button" value="反选" /> <input id="btnSubmit" type="button" value="提交" /> </div> </body> </html>
checkBox 全选、全不选、反选的更多相关文章
- 利用jQuery实现CheckBox全选/全不选/反选
转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...
- Android 带checkbox的listView 实现多选,全选,反选
由于listview的一些特性,刚开始写这种需求的功能的时候都会碰到一些问题,重点就是存储每个checkbox的状态值,在这里分享出了完美解决方法: 布局文件: [html] <?x ...
- 【转】Android 带checkbox的listView 实现多选,全选,反选 -- 不错
原文网址:http://blog.csdn.net/onlyonecoder/article/details/8687811 Demo地址(0分资源):http://download.csdn.net ...
- 【转】Android 带checkbox的listView 实现多选,全选,反选----解决checkbox错位问题
原文网址:http://blog.csdn.net/onlyonecoder/article/details/8687811 Demo地址(0分资源):http://download.csdn.net ...
- Jquery 利用单个复选款(checkbox)实现全选、反选
1 <script type="text/javascript"> $(function(){ //全选 $("#CheckedAll").clic ...
- 全选,不选,反选 jquery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery 全选 全不选 反选
1.概述 在项目中经常遇到列表中对复选框进行勾选操作,全选...反选.. 2. example <html> <body> <form id="test-for ...
- jquery的全选/全不选/反选以及attr添加checked属性失败的解决办法
如下图: <head> <title></title> <style type="text/css"> div { border: ...
- Jq 遍历 全选 全不选 反选
//全选 全不选 $('#checkAll').click(function () { //判断是否被选中 var bischecked = $('#checkAll').is(':checked') ...
- JS实现全选、不选、反选
思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果check ...
随机推荐
- js数据类型基础
一.数据类型 数据类型包括:基本数据类型和引用数据类型 基本数据类型指的是简单的数据段,引用数据类型指的是有多个值构成的对象. 当我们把变量赋值给一个变量时,解析器首先要确认的就是这个值是基本类型值还 ...
- Error: connection reset by peer ,during filebeat connect to elk.
Error screenshot like below: Reason: What I found that was the machine failing had same configuratio ...
- 5、OpenCV Python ROI和泛洪填充
__author__ = "WSX" import cv2 as cv import numpy as np #泛洪填充 从一个点开始 ,填充周围和他相似的点,直到遇到一个边界 # ...
- php 顺序线性表
<?php /* * 线性顺序表 ,其是按照顺序在内存进行存储,出起始和结尾以外都是一一连接的(一般都是用一维数组的形式表现) * * GetElem: 返回线性表中第$index个数据元素 * ...
- filter防止xxs攻击
什么是XSS攻击? XSS攻击使用Javascript脚本注入进行攻击 例如在表单中注入: <script>location.href='http://www.itmayiedu.com' ...
- node.js 服务器
http-server 是一个简单的零配置命令行HTTP服务器, 基于 nodeJs. 如果你不想重复的写 nodeJs 的 web-server.js, 则可以使用这个. 安装 (全局安装加 -g) ...
- spring boot 很好的文章
http://blog.csdn.net/isea533/article/details/50278205
- 神奇的操作--O(1)快速乘
从同机房大佬那里听来的... 用O(1)时间求出两个相乘超过long long的数的取摸的结果 神奇的操作... inline long long multi(long long x,long lon ...
- P3802 小魔女帕琪
传送门 考虑前面7个魔法 如果前面七个魔法各不相同,那么就能完成一次帕琪七重奏 设 A=a1*a2*...*a7,S=a1+a2+...+a7,B=S*(S-1)*...*(S-6) 对于不同的施法顺 ...
- java登录验证码 用到spring框架
转载:https://blog.csdn.net/zqd_java/article/details/53638143 在次大神基础上添加下述js代码即可使用了. //登陆验证 function cha ...