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 ...
随机推荐
- （原创）E - Straight Shot Gym - 101652R
解题思路:这道题的题意就是给你n,总距离X,速度v:以及n组数据:人行道的左端点和右端点,以及人行道的速度(竖直方向),如果从(0,0)到(X,0)的时间小于2X/v,则输出其时间,否则输出”Too ...
- 【谁知道C#字段为什么用属性封装？】
源地址:https://zhidao.baidu.com/question/1174413218458798139.html 我们知道,类成员包括变量和方法.如果希望其他类能够访问成员变量的值,就必须 ...
- poj1811(pollard_rho模板)
题目链接: http://poj.org/problem?id=1811 题意: 判断一个数 n (2 <= n < 2^54)是否为质数, 是的话输出 "Prime" ...
- 33 个 2017 年必须了解的 iOS/swift 开源库第三方库
本文翻译自Medium,原作者为 Paweł Białecki<img src="https://pic3.zhimg.com/v2-c786777447261347b0d97 ...
- 将已有项目同步到远程git仓库(github,gitee)及giteee的visual studio插件使用一二
一.将已有项目同步到远程仓库的最简便方法是用git bash: 将已有项目同步到远程仓库有两种方法:1用git bash:2.用vs插件,两者的思路和步骤基本一致的. 实验发现,如果用vs插件,bas ...
- C++基础学习4：引用
C++引用(Reference) 引用(Reference)是C++语言相对于C语言的又一个扩充,是C++常用的一个重要内容之一.类似于指针,只是在声明的时候用"&"取代了 ...
- 删除Ati显卡桌面右键菜单（配置可交换显卡，显示卡属性，图形选项，图形属性）
Win+R 打开注册表 依次找到 HKEY_CLASSES_ROOT\Directory\Background\shellex\ContextMenuHandlers 保留Gadgets.New.Sh ...
- pycharm、idea 2018软件安装教程
Python3.7安装: https://www.jb51.net/article/146326.htm pycharm软件: https://www.jianshu.com/p/cf77d74bef ...
- k2安装LEDE
固件下载时请用Breed Web 恢复控制台恢复固件,步骤如下:1.到LEDE官方网站下载最新开发版固件2.Web Breed台刷写固件3.将一台能上网的路由器LAN口接至K2 WAN口,等待K2连上 ...
- hive export import
create database target_db; drop table target_db.kylin_account; dfs -rm -r /tmp/kylin_account; export ...