jQuery全选、全不选、反选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../js/jquery1.8.3.min.js"></script>
<title>表单操作-checkbox</title>
<style>
*{margin:10px}
</style>
</head>
<body>
<form method="post" action="">
你爱好的运动是？
<br/>
<input type="checkbox" name="items" value="足球" id="zq"/><label for="zq"> 足球</label>
<input type="checkbox" name="items" value="篮球" id="lq"/><label for="lq"> 篮球</label>
<input type="checkbox" name="items" value="羽毛球" id="ymq"/><label for="ymq">羽毛球</label> 羽毛球
<input type="checkbox" name="items" value="乒乓球" id="ppq"/><label for="ppq">乒乓球</label>
<br/>
<input type="button" id="CheckedAll" value="全 选"/>
<input type="button" id="CheckedNo" value="全不选"/>
<input type="button" id="CheckedRev" value="反 选"/> <input type="button" id="send" value="提 交"/>
</form>
<script>
$(function(){
//全选
$("#CheckedAll").click(function(){
$("input[name=items]").attr("checked",true);
});
//全不选
$("#CheckedNo").click(function(){
$("input[name=items]").attr("checked",false);
}); //反选
$("#CheckedRev").click(function(){
//checkbox
var checkElem = $("input[name=items]");
/**方法一：
for(var i = 0; i<checkElem.length;i++){
checkElem[i].checked = !checkElem[i].checked;
}
**/
//方法二：
checkElem.each(function(){
this.checked = !this.checked;
});
/**方法三：
checkElem.each(function(){
if($(this).attr("checked")){
$(this).attr("checked",false);
}else{
$(this).attr("checked",true);
}
});
**/
});
})
</script>
</body>
</html>
jQuery全选、全不选、反选的更多相关文章
- 利用jQuery实现CheckBox全选/全不选/反选
转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...
- jquery的全选/全不选/反选以及attr添加checked属性失败的解决办法
如下图: <head> <title></title> <style type="text/css"> div { border: ...
- jQuery实现的全选、反选和不选功能
适用于网页多选后需要进行批量操作的场景(如批量删除等).如有问题希望大家可以指正.谢谢~~ HTML 我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮 ...
- 用jQuery实现全选-全不选-反选的功能
临近过年,刚学IT没多久的小白在这里祝大家在新的一年里:新春快乐,月月赚钱,天天开心,时时快乐,分分精彩,秒秒幸福,事事顺利 古人云:学而时习之,不亦说乎. 学习后经常温习所学的知识,也是件令人愉悦的 ...
- jQuery实现全选、不选和反选功能
jQuery结合Font Awesome字体图标实现全选.不选和反选功能 Font Awesome字体图标链接地址:http://www.fontawesome.com.cn/faicons/ 效果: ...
- jquery实现全选、不选、反选的两种方法
在取复选框checkbox的属性checked属性值时,发现一个问题,就是当用attr取值时,真的为"checked",假的为"undefined";当用pro ...
- jQuery实现的全选、反选和获取当前所有选中的值功能
链接: jQuery实现的全选.反选和获取当前所有选中的值功能 <ul id="list"> <li><label><input type ...
- Java 多选框的全选、多选、反选（JQuery 实现）
jQuery 实现全选.多选.反选 学习内容: 需求 总结: 学习内容: 需求 jQuery 实现全选.多选.反选 实现代码 <!DOCTYPE html> <html lang=& ...
- jquery 全选 全不选 反选
1.概述 在项目中经常遇到列表中对复选框进行勾选操作,全选...反选.. 2. example <html> <body> <form id="test-for ...
- jQuery实现checkbox全选反选及删除等操作
1.list.html 说明:用checkbox数组Check[]存放每一行的ID值 <div id="con"> <table width="100% ...
随机推荐
- TCP/IP之TCP_NODELAY与TCP_CORK
TCP/IP之Nagle算法与40ms延迟提到了Nagle 算法.这样虽然提高了网络吞吐量,但是实时性却降低了,在一些交互性很强的应用程序来说是不允许的,使用TCP_NODELAY选项可以禁止Nagl ...
- 机器指令翻译成 JavaScript —— No.4 动态跳转
上一篇,我们用模拟流程的方式,解决了跳转问题. 不过静态跳转,好歹事先是知道来龙去脉的.而动态跳转,只有运行时才知道要去哪.既然流程都是未知的,翻译从何谈起? 动态跳转,平时出现的多吗?非常多!除了 ...
- HTML5- Canvas入门（五）
今天要介绍的是canvas对图形对象的操作,包括图像.视频绘制,和操作像素对象的方法. 图片/视频的绘制 在canvas中,我们可以通过 drawImage() 的方法来绘制图片或视频文件,其语法为: ...
- 为什么说每个程序员都应该刷几道LeetCode？
2015年即将过去,最近在回顾和总结过去一年的工作经历,发现自己并不能算是一名合格的程序员. Google某前员工Lucida在文章<白板编程访谈——Why,What,How>当中写道: ...
- 跟我一起ggplot2（1）
ggplot2 R的作图工具包,可以使用非常简单的语句实现非常复杂漂亮的效果. qplot 加载qplot library(ggplot2) # 测试数据集,ggplot2内置的钻石数据 qplot( ...
- ABP框架 - 仓储
文档目录 本节内容: 默认仓储 自定义仓储 自定义仓储接口 自定义仓储实现 基仓储方法 查询 获取单个实体 获取实体列表 关于 IQueryable 自定义返回值 插入 更新 删除 其它 关于异步方法 ...
- dhcp协议交互报文
DHCP共有八种报文,分别为DHCP Discover.DHCP Offer.DHCP Request.DHCP ACK.DHCP NAK.DHCP Release.DHCP Decline.DHCP ...
- Winform下CefSharp的引用、配置、实例与报错排除(源码)
Winform下CefSharp的引用.配置.实例与报错排除 本文详细介绍了CefSharp在vs2013..net4.0环境下,创建Winfrom项目.引用CefSharp的方法,演示了winfro ...
- JavaScript随笔3
1.获取非行间css if(oDiv.currentStyle){ alert(oDiv.currentStyle.width); }else{ alert(oDiv.getComputedStyle ...
- Entity Framework中使用IEnumerable<T>、IQueryable<T>及IList<T>的区别
1. IEnumerable<T> IEnumerable<T> :对于在内存中集合上运行的方法,返回的可枚举对象将捕获传递到方法的参数.在枚举该对象时,将使用查询运算符的逻辑 ...