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 ...
随机推荐
- DOM4J的使用
http://blog.csdn.net/redarmy_chen/article/details/12969219 http://blog.csdn.net/wlbing0625/article/d ...
- 【解决方法】安装Win7和linux双系统后,linux报错“无法分配所提交的分区 not enough free space on disks”问题,以及win7无法启动“BootMGR image is corrupt....”问题
近日,在笔记本上重装了Win7 企业版(64位)后,想装个linux双系统,于是开始安装 centOS 6.2(光盘安装) 硬盘分了一个主分区(c盘),一个扩展分区(3个逻辑分区:d,e,f盘),然后 ...
- 第一章 Android系统移植与驱动开发概述
本书第一章首先简单概要地介绍了关于Android系统移植和驱动开发的相关内容. 所谓“移植”是指为特定的自己的设备,如手机定制Android的过程.自己开发一些程序(移植)装载在设备上,使得Andro ...
- lightoj1348
//Accepted 6004 KB 924 ms /* source: lightoj1348 time :2015.5.29 by :songt */ /*题解: 树链剖分 */ #include ...
- 使用windows crypt API解析X509证书
一.版本号 结构体CERT_INFO中的字段dwVersion即为证书版本,可以直接通过下面的代码获得: DWORD dwCertVer = m_pCertContext->pCertInfo- ...
- What is the difference between the ways to implement inheritance in javascript.
see also : http://www.w3school.com.cn/js/pro_js_inheritance_implementing.asp http://davidshariff.com ...
- Session Tracking Approaches
cookies url rewriting hidden field see also: http://www.informit.com/articles/article.aspx?p=29817&a ...
- 几种常见算法js
没有系统地总结过js算法,虽然在项目中陆陆续续的也用过好多算法,有一次去一家公司面试的时候,面试官说想谈谈算法,有点懵了,所以接下来的面试中谈的也有点被动,避免下次再碰到这种情况,今天决定好好的总结下 ...
- LINQ To SQL
议程 1.LINQ To SQL概述 2.LINQ To SQL对象模型 3.LINQ To SQL查询 用到的数据库 SQL Server 2005,数据库名为Test. 两张表,分别为Studen ...
- New XAMPP security concept:错误解决方法
New XAMPP security concept:错误解决方法 (2014-03-06 16:07:46) 转载▼ 分类: php 在Linux上配置xampp后远程访问域名报错: New X ...