（转载）jquery实现全选、反选、获得所有选中的checkbox
举了7个不同的checkbox状态，和大家一一分享。
1、全选
$("#btn1").click(function(){
$("input[name='checkbox']").attr("checked","true");
})
2、取消全选（全不选）
$("#btn2").click(function(){
$("input[name='checkbox']").removeAttr("checked");
})
3、选中所有奇数
$("#btn3").click(function(){
$("input[name='checkbox']:odd").attr("checked","true");
})
4、选中所有偶数
$("#btn6").click(function(){
$("input[name='checkbox']:even").attr("checked","true");
})
5、反选
$("#btn4").click(function(){
$("input[name='checkbox']").each(function(){
if($(this).attr("checked"))
{
$(this).removeAttr("checked");
}
else
{
$(this).attr("checked","true");
}
})
})
或者
$("#invert").click(function(){
$("#ruleMessage [name='delModuleID']:checkbox").each(function(i,o){
$(o).attr("checked",!$(o).attr("checked"));
});
});
6、获取选择项的值
var aa="";
$("#btn5").click(function(){
$("input[name='checkbox']:checkbox:checked").each(function(){
aa+=$(this).val()
})
document.write(aa);
})
})
7、遍历选中项
$("input[type=checkbox][checked]").each(function(){
//由于复选框一般选中的是多个,所以可以循环输出
alert($(this).val());
});
下面实例讲述了jquery实现全选、反选、获得所有选中的checkbox。分享给大家供大家参考。具体如下：
运行效果截图如下：
具体代码如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<script src="js/jquery-1.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($){
//全选
$("#btn1").click(function(){
$("input[name='checkbox']").attr("checked","true");
})
//取消全选
$("#btn2").click(function(){
$("input[name='checkbox']").removeAttr("checked");
})
//选中所有基数
$("#btn3").click(function(){
$("input[name='checkbox']:even").attr("checked","true");
})
//选中所有偶数
$("#btn6").click(function(){
$("input[name='checkbox']:odd").attr("checked","true");
})
//反选
$("#btn4").click(function(){
$("input[name='checkbox']").each(function(){
if($(this).attr("checked"))
{
$(this).removeAttr("checked");
}
else
{
$(this).attr("checked","true");
}
})
})
//或许选择项的值
var aa="";
$("#btn5").click(function(){
$("input[name='checkbox']:checkbox:checked").each(function(){
aa+=$(this).val()
})
document.write(aa);
})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" id="btn1" value="全选">
<input type="button" id="btn2" value="取消全选">
<input type="button" id="btn3" value="选中所有奇数">
<input type="button" id="btn6" value="选中所有偶数">
<input type="button" id="btn4" value="反选">
<input type="button" id="btn5" value="获得选中的所有值">
<br>
<input type="checkbox" name="checkbox" value="checkbox1">
checkbox1
<input type="checkbox" name="checkbox" value="checkbox2">
checkbox2
<input type="checkbox" name="checkbox" value="checkbox3">
checkbox3
<input type="checkbox" name="checkbox" value="checkbox4">
checkbox4
<input type="checkbox" name="checkbox" value="checkbox5">
checkbox5
<input type="checkbox" name="checkbox" value="checkbox6">
checkbox6
<input type="checkbox" name="checkbox" value="checkbox7">
checkbox7
<input type="checkbox" name="checkbox" value="checkbox8">
checkbox8
</div>
</form>
</body>
</html>
（转载）jquery实现全选、反选、获得所有选中的checkbox的更多相关文章
- python: jquery实现全选 反选 取消
引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...
- jquery 书写全选反选功能
书写一个后台管理中用到的全选反选功能.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- jquery实现全选/反选功能
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...
- jQuery实现全选/反选和批量删除
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncod ...
- 基于JQ的多选/全选/反选及获取选中的值
<!-- author:青芒 --> <!DOCTYPE html> <html lang="en"> <head> <met ...
- ----Juquery复选框全选反选及获取选中值Value
--获取选中值 var pList = ""; $("[name='ckdProd']").each(function () { if ($(this).is( ...
- jQuery实现全选反选功能
废话不说,直接上代码! <html> <head> <meta http-equiv="Content-Type" content="tex ...
- jquery 实现全选反选
jquery代码 $(function () { $('#inputCheck').click(function () { if ($(this).attr("checked")) ...
- jquery实现全选 反选 取消
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- C++:sprintf()的用法（转）
转:http://blog.csdn.net/masikkk/article/details/5634886 更多:http://blog.csdn.net/zjuwispersure/article ...
- VC2010 配置OpenGL环境(转)
转自http://www.cnblogs.com/longdouhzt/archive/2012/02/13/2350094.html OpenGL开发环境简介 基于OpenGL标准开发的应用程序运行 ...
- Centos下防止ssh暴力破解密码
参考文章地址:https://yq.aliyun.com/ziliao/48446 https://www.cnblogs.com/lsdb/p/7095288.html 1.收集 /var/log/ ...
- php数据结构之二叉树
树是一种比较重要的数据结构, 尤其是二叉树.二叉树是一种特殊的树,在二叉树中每个节点最多有两个子节点,一般称为左子节点和右子节点(或左孩子和右孩子),并且二叉树的子树有左右之 分,其次序不能任意颠倒. ...
- [2018HN省队集训D1T3] Or
[2018HN省队集训D1T3] Or 题意 给定 \(n\) 和 \(k\), 求长度为 \(n\) 的满足下列条件的数列的数量模 \(998244353\) 的值: 所有值在 \([1,2^k)\ ...
- grep命令.md
grep命令 简介 Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来.grep全称是Global Regular Expression Prin ...
- URL地址理解
/ 表示相对目录的根目录./ 表示相对目录的本层目录../ 表示相对目录的上层目录
- Eclipse的PHP插件PHPEclipse安装和使用
PHP有很多相当不错的开发工具,如Zend Studio.NetBeans.phpdesigner等,但对于习惯Java编程的程序猿们来说,最常用的还要属Eclipse.那么Eclipse能用于PHP ...
- smooth l1
1.loss要规范化,这样就不会受图片大小的影响 2.w.h采用log:比较特殊的是w,hw,h的regression targets使用了log space. 师兄指点说这是为了降低w,hw,h产生 ...
- 论文笔记 Pose-driven Deep Convolutional Model for Person Re-identification_tianqi_2017_ICCV
1. 摘要 为解决姿态变化的问题,作者提出Pose-driven-deep convolutional model(PDC),结合了global feature跟local feature, 而loc ...