jquery checkbox的相关操作——全选、反选、获得所有选中的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());
});
8、例子

<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>

9、效果图
aaarticlea/png;base64,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" alt="" />
致谢:感谢您的耐心阅读!
jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox的更多相关文章
- Dom操作--全选反选
我们经常会在网站上遇到一些多选的情况,下面我就来说说使用Dom写全选反选的思路. 全选思路:首先,我们来分析一下知道,当我们点击"全选"复选框的时候,所有的复选框应该都被选中,那我 ...
- 基于JQ的多选/全选/反选及获取选中的值
<!-- author:青芒 --> <!DOCTYPE html> <html lang="en"> <head> <met ...
- ----Juquery复选框全选反选及获取选中值Value
--获取选中值 var pList = ""; $("[name='ckdProd']").each(function () { if ($(this).is( ...
- 永久的CheckBox(单选,全选/反选)!
<html> <head> <title>选择</title> <script type="text/javascript" ...
- 优秀前端工程师必备: 非常常用的checkbox的骚操作---全选和单选demo
提要: 前端开发的时候, 经常会遇到表格勾选, 单个勾选判断是否全选的事情.趁着有时间, 总结一下以备不时之需! 就像下面这个栗子: 1 源代码: h5 // 全选框 <input type=& ...
- jQuery全选/反选checkbox
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- BootStrapt iCheck表单美化插件使用方法详解(含参数、事件等) 全选 反选
特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备 2.支持触摸设备 — iOS.Android.BlackBerry.Windows Phone等系统 4.方便 ...
- jquery、js操作checkbox全选反选
全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...
- jQuery之标签操作和返回顶部、登录验证、全选反选、克隆示例
一.样式操作 1.JQ中的样式类 somenode.addClass();// 添加指定的CSS类名. somenode.removeClass();// 移除指定的CSS类名. somenode.h ...
随机推荐
- mkstemp生成临时文件
使用该函数可以指定目录生成临时文件,函数原型为 int mkstemp(char *template); 应用举例 int main(int argc, char *argv[]) { /* char ...
- jQuery性能优化
1. 优化选择器执行的速度 优先使用ID与标记选择器 在jQuery中,访问DOM元素的最快方式是通过元素ID号,其次是通过元素的标记.因为前者源于JavaScript中的document.getEl ...
- c++虚函数和内联构造函数
创建一个含有虚函数的对象时, 编译器会实现 "初始化其VPTR以指向相应的VTABLE" 这个操作 ,而实现这个操作是通过 "插入隐藏代码至构造函数中" 故此时 ...
- 关于XML文档
很多人觉得XML很简单,但我想说其实一点也不简单,特别是在当今被各种web文档充斥的世界里有必要对XML进行一定程度的研究.下面的几篇博客将对XML技术进行简短的说明.
- Spring中配置文件中引用外部文件
src\dayday\conn.java package dayday;import java.sql.Connection;import java.sql.DriverManager;import ...
- Spring中的自动装配
src\dayday\Person.java package dayday;/** * Created by I am master on 2016/11/28. */public class Per ...
- HTML 样式属性
@charset "utf-8"; /* CSS Document */ <style> p{ /*背景与前景*/ background-color:#000;/*背景 ...
- django使用ldap认证
pip3 install django-auth-ldap python-ldap urls.py, from app0104 import views urlpatterns = [ url(r'^ ...
- 【转】Sqlite 混合模式程序集是针对“v2.0.50727”版的运行时生成的,在没有配置其他信息的情况下,无法在 4.0 运行时中加载该...
开发环境: vs2010+.net framework 4.0+ System.Data.SQLite.DLL (2.0)今天在做Sqlite数据库测试,一运行程序在一处方法调用时报出了一个异常 混合 ...
- VS2010+PCL配置
原文出自(转载): http://blog.csdn.net/renshengrumenglibing/article/details/9073675 1.安装 pcl 的完全安装包可以到: http ...