JQury选择器实现全选、反选

news/2024/7/10 23:26:54 标签: jquery

实现全选、反选

<body>

	<form method="post" action="">
	
		您精通的语言:<input type="checkbox" id="checkedAllBox" />全选/全不选 
		
		<br />
		<input type="checkbox" name="items" value="jav" />java
		<input type="checkbox" name="items" value="js" />javascript
		<input type="checkbox" name="items" value="c++" />c++
		<input type="checkbox" name="items" value="python" />python
		<br />
		<input type="button" id="checkedAllBtn" value="全　选" />
		<input type="button" id="checkedNoBtn" value="全不选" />
		<input type="button" id="checkedRevBtn" value="反　选" />
		<input type="button" id="sendBtn" value="提　交" />
	</form>
	<script type="text/javascript" src="要导入的jqury类库的路径"></script>
	<script type="text/javascript">	
		$(function(){		
var $items = $(":checkbox[name=items]");
var items = $("[name='items']");
//全选按钮
$("#checkedAllBtn").click(function(){
items.attr("checked",true);
$("#checkedAllBox").attr("checked",true);
});
//全不选按钮
$("#checkedNoBtn").click(function(){
items.attr("checked",false);
$("#checkedAllBox").attr("checked",false);
});

//反选按钮
$("#checkedRevBtn").click(function(){
items.each(function(){
this.checked = !this.checked;
});
var flag = $("[name='items']:checked").length==4;
$("#checkedAllBox").attr("checked",flag);
});

//提交按钮
$("#sendBtn").click(function(){
$(":checkbox[name='items']:checked").each(function()
alert(this.value);
		});
	});	
	
//全选/全不选
$("#checkedAllBox").click(function(){	items.attr("checked",this.checked);
});	
//全选/全不选复选框与items状态同步
$("[name='items']").click(function(){
var flag = $("[name='items']:checked").length==4;
$("#checkedAllBox").attr("checked",flag);
	});
});		
	</script>
</body>

http://www.niftyadmin.cn/n/1697483.html

相关文章

【Web探索之旅】第三部分第一课：server

【Web探索之旅】第三部分第一课：server

内容简单介绍 1、第三部分第一课&#xff1a;server 2、第三部分第二课预告&#xff1a;IP地址和域名 第三部分第一课&#xff1a;server 大家好&#xff0c;欢迎来到【Web探索之旅】的第三部分。这一部分有不少原理。还是非常重要的。这一部分我们会着眼于一个Web site&#x…
阅读更多...
控制流 if -else

控制流 if -else

1. 语法 if expression :do this elif expression :do this elif expression:do this else &#xff1a;do this if x:pass 这样是最好的if x True :pass 不要这么写 如果表达式 expression 的值为真&#xff08;不为零的任何值都为真&#xff09;&#xff0c;程序将执行缩进…
阅读更多...
最强单链表合集（一）

最强单链表合集（一）

单链表(带头节点&#xff09; 定义节点 class Node {public int val;public Node next;public Node(int val) {this.val val;}Overridepublic String toString() {return "Node{" "val" val };} }创建带头节点的链表 class SingleLinkedLsit {privat…
阅读更多...
Vue 2.0 入门系列（13）用面向对象的概念去实现任务列表 (2)

Vue 2.0 入门系列（13）用面向对象的概念去实现任务列表 (2)

本节将进一步将表单封装成类。首先&#xff0c;定义基本的类: class Form {constructor(data) {this.originData data; //form.data.namefor (let field in data) {this[field] data[field]; // form.name}this.errors new Errors();}} 为了可以通过 form.name 的方式来访…
阅读更多...
Flutter开发微信小程序实战：构建一个简单的天气预报小程序

Flutter开发微信小程序实战：构建一个简单的天气预报小程序

微信小程序是一种快速、高效的开发方式&#xff0c;Flutter则是一款强大的跨平台开发框架。结合二者&#xff0c;可以轻松地开发出功能丰富、用户体验良好的微信小程序。 这里将介绍如何使用Flutter开发一个简单的天气预报小程序&#xff0c;并提供相应的代码示例。 1. 准备工…
阅读更多...
LaTeX使用心得

LaTeX使用心得

LaTeX是一个功能强大的&#xff0c;开源的排版工具。 最近教练让我们做课件&#xff0c;我做数论&#xff0c;鉴于LaTeX的数学公式功能强大&#xff08;而MS办公软件的数学公式简直就是个LJ&#xff09;和我的学习精神&#xff0c;我决定用LaTeX写课件。 在一开始时候&#xff…
阅读更多...
最强单链表合集（二）相关题解

最强单链表合集（二）相关题解

一、计算链表中节点个数 /*** return count 链表中的结点个数*/public static int getLength(Node head) {if(headnull) {return 0;}Node temp headint count0;while(temp!null){count;temptemp.next;}return count;}二、返回倒数第k个节点 方法一&#xff1a;计算链表中的结点…
阅读更多...
生物进化中的数学

生物进化中的数学

为质数而生的蝉 有些蝉会展现出令人吃惊的特性&#xff1a;它们集体探出土壤的时间通常都跟 13 和 17 这样的质数年同步&#xff0c;此时大概会有150 万只以上的成蝉在短时间内同时出现在一英亩的土地上。 蝉是在大约180 万年前、当覆盖北美大陆的冰河消退后&#xff0c;于更新…
阅读更多...
最新文章

Copyright @ 2022~2023