jquery实现全选反选

原创 2012年03月23日 11:13:36
//挺简单的jquery实现全选反选功能
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" language="javascript" src="../jquery-1.7.1.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
	$("#all-yes").click(function(){
		$("input[name=fav]").attr("checked","checked");
		});
	$("#all-no").click(function(){
		$("input[name=fav]").attr("checked",false);
		});
	$("#fanxuan").click(function(){
		$("input[name=fav]").each(function(){
			if(this.checked){
				$(this).attr("checked",false);
				}else{
			$(this).attr("checked",true);
			}
			});
		});
		$("#isAll").click(function(){
		if(this.checked){
		$("input[name=fav]").attr("checked",true);
			}else{
				$("input[name=fav]").attr("checked",false);
				}
		});
		
		
	});

</script>
</head>

<body>
爱好的选择:<br>
<input type="checkbox" value="全选/全不选" id="isAll">全选/全部选
<br>
<input type="checkbox" name="fav">睡觉
<input type="checkbox" name="fav">看电视
<input type="checkbox" name="fav">读书
<input type="checkbox" name="fav">听音乐<br>
<input type="button" id="all-yes" value="全选">
<input type="button" id="all-no" value="全不选">
<input type="button" id="fanxuan" value="反选">
</body>
</html>


用JQuery实现全选、全不选、反选

$(function () { $('#allOrNone').click(function () { //点击“选择状态”,实现全选与全不选 ...
  • Joyhen
  • Joyhen
  • 2013年08月01日 09:28
  • 1057

checkbox 全选/反选功能的 jquery插件(支持多页保持选择)

XCheck为checkbox 全选/反选功能的 jquery插件,支持多页情况下保存已选项的情况。...
  • luoyeyu1989
  • luoyeyu1989
  • 2016年02月09日 17:58
  • 2429

JQuery实现全选、全不选和反选功能

项目中需要做一个全选、全不选和反选的功能。刚接到这个需求的时候,心想很简单的一个功能,几行代码就能搞定,然而事实并非如此。下面就把我的思路说一下: 1、当点击'全选'按钮时,页面中所有的复选框都应...
  • oXinLiang12
  • oXinLiang12
  • 2016年12月12日 16:01
  • 3164

jQuery实现全选、全不选和反选,没有只能选一次的bug

学习到用.attr设置checked属性时出现全选只能实现一次的效果(关键是作业必须用button做)。。很郁闷。。终于找到解决的办法啦: 第一个比较不常用 的用button来做得全选全不选和反选按钮...
  • tsh18523266651
  • tsh18523266651
  • 2015年12月26日 17:19
  • 580

jQuery实现表单全选、全不选以及反选的功能

本文主要介绍了利用jQuery实现表单的全选、全不选以及反选的功能。对如下的form表单: 请选择想要学习的编程语言: ...
  • github_38383183
  • github_38383183
  • 2017年06月22日 20:07
  • 702

Jquery实现全选(全部取消)反向选择

/*每个DIV占据一行*/ div{ display: block; } //文档加载完毕之后执行 $(document).ready(function() { //获...
  • MicrosoftDesigner
  • MicrosoftDesigner
  • 2016年11月11日 14:08
  • 717

Vue.js实现checkbox的全选和反选

小颖之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.很感谢博客园的朋友帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. 1.html ...
  • qiupu4667
  • qiupu4667
  • 2017年04月18日 20:05
  • 803

使用js实现checkbox的全选与反选功能

代码如下
  • Geek_ymv
  • Geek_ymv
  • 2014年10月23日 09:38
  • 2133

Jquery之实现全选反选功能

开心一笑汤普森:“夫人,你刚去世的丈夫是我最亲密的朋友,希望你能送我一件他的遗物,让我永久保存以作纪念。” 艾丽斯:“仁慈的上帝啊,除了我本人外,我丈夫什么也没留下。”提出问题如何用Jquery实现...
  • huangwenyi1010
  • huangwenyi1010
  • 2016年05月05日 22:59
  • 1291

关于jquery全选和取消全选遇到的只能选一次问题记录

今天想用jquery写个全选与取消全选的案例,出了点小问题,先把代码贴出来吧: 全选 篮球 足球 $(function(){ $("#alld...
  • a386611016
  • a386611016
  • 2015年07月24日 10:04
  • 680
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery实现全选反选
举报原因:
原因补充:

(最多只允许输入30个字)