jquery 操作checkbox的例子(全选,反选,获取选取值)
2008-12-22 18:08
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2<HTML>
3 <HEAD>
4 <TITLE> New Document </TITLE>
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
6 <link href="css/ingrid.css" rel="stylesheet" type="text/css">
7<script language="JavaScript" src="jquery-1.2.3.pack.js" type="text/javascript"></script>
8 <SCRIPT LANGUAGE="JavaScript">
9 <!--
10 $("document").ready(function(){
11
12 $("#btn1").click(function(){
13
14 $("[name='checkbox']").attr("checked",'true');//全选
15
16 })
17 $("#btn2").click(function(){
18
19 $("[name='checkbox']").removeAttr("checked");//取消全选
20
21 })
22 $("#btn3").click(function(){
23
24 $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
25
26 })
27 $("#btn4").click(function(){
28
29 $("[name='checkbox']").each(function(){
30
31
32 if($(this).attr("checked"))
33 {
34 $(this).removeAttr("checked");
35
36 }
37 else
38 {
39 $(this).attr("checked",'true');
40
41 }
42
43 })
44
45 })
46 $("#btn5").click(function(){
47 var str="";
48 $("[name='checkbox'][checked]").each(function(){
49 str+=$(this).val()+"\r\n";
50 })
51 alert(str);
52 })
53 })
54 //-->
55 </SCRIPT>
56
57 </HEAD>
58
59 <BODY>
60 <form name="form1" method="post" action="">
61 <input type="button" id="btn1" value="全选">
62 <input type="button" id="btn2" value="取消全选">
63 <input type="button" id="btn3" value="选中所有奇数">
64 <input type="button" id="btn4" value="反选">
65 <input type="button" id="btn5" value="获得选中的所有值">
66 <br>
67 <input type="checkbox" name="checkbox" value="checkbox1">
68 checkbox1
69 <input type="checkbox" name="checkbox" value="checkbox2">
70 checkbox2
71 <input type="checkbox" name="checkbox" value="checkbox3">
72 checkbox3
73 <input type="checkbox" name="checkbox" value="checkbox4">
74 checkbox4
75 <input type="checkbox" name="checkbox" value="checkbox5">
76 checkbox5
77 <input type="checkbox" name="checkbox" value="checkbox6">
78 checkbox6
79 <input type="checkbox" name="checkbox" value="checkbox7">
80 checkbox7
81 <input type="checkbox" name="checkbox" value="checkbox8">
82 checkbox8
83 </form>
84
85 </BODY>
86</HTML>
87http://hi.baidu.com/godist/blog/item/b28e5924edbadd064c088d8e.html
分享到：
相关推荐
"jquery全选反选全不选案例" 是一个常见的交互功能，常见于表格或者列表中，允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...
对于“全选”、“全不选”和“反选”功能，jQuery 提供了简洁的解决方案，同时也可以方便地获取选中的元素值。以下我们将详细探讨如何使用 jQuery 实现这些功能。 1. **全选**： 全选功能通常应用于具有多选选项的...
本文将详细讲解如何使用jQuery来操作checkbox，并实现全选、全不选、反选以及获取选中值这四个核心功能。 ### 一、jQuery选择器与checkbox操作 在jQuery中，我们可以使用不同的选择器来选取页面上的checkbox元素。...
知识点一：使用jQuery实现checkbox全选和反选功能 1. jQuery是一种快速、小巧、功能丰富的JavaScript库，它封装了JavaScript常用的功能代码，极大地简化了JavaScript的开发。 2. checkbox全选和反选是web开发中常见...
在上面的代码中，`$("#deleteButton").click()`监听删除按钮的点击事件，`$("input[type='checkbox']:checked")`选取所有选中的复选框，`$(this).val()`获取复选框的值（假设每个复选框关联一个值）。`$.ajax`则用于...
本文将深入探讨jQuery中关于“全选”、“反选”以及“获取选中值”的相关知识点，帮助你更好地理解和应用这些功能。 ### 一、jQuery全选 全选功能通常应用于多选列表或表格中，允许用户一次性选择所有选项。在...
#### 使用jQuery实现Checkbox全选和反选 在本篇文章中，我们将详细介绍如何使用jQuery来实现复选框的全选与反选功能，并通过一个具体的示例代码进行解析。 ### jQuery简介 jQuery是一款流行的JavaScript库，它极...
以上就是使用 jQuery 和 JavaScript 操作 checkbox 全选和反选的基本方法。在实际应用中，你可以根据需要调整这些函数，例如添加事件监听器，使得全选/反选按钮可以触发这些功能。在网页开发中，这样的功能能够显著...
总之，"jquery全选反选"涉及的核心知识点包括：jQuery的选择器、属性操作、事件绑定以及可能的递归处理。实际应用中，开发者需要结合具体的HTML结构和需求，灵活运用这些知识来实现功能。如果需要深入学习，可以查阅...
本示例“基于jQuery的三个JS复选框全选反选例子.zip”聚焦于如何利用jQuery实现复选框的全选与反选功能，这在表格或者多选项选择场景中非常常见。以下将详细介绍这一功能的实现方式。 首先，我们需要理解复选框...
总结起来，这个基于jQuery的全选、反选复选框插件源码例子涉及到了jQuery的选择器、属性操作、事件处理、可能还有动画和插件封装等技术。对于想要提升jQuery技能或者了解复选框交互的开发者来说，这是一个很有价值的...
这个"jQuery实现的表格行全选反选单选特效源码.zip"文件，显然提供了一种实现表格中行的全选、反选和单选效果的示例代码。下面我们将深入探讨jQuery在实现这种功能时涉及的关键知识点。 首先，jQuery的选择器是其...
本教程将重点讲解如何使用jQuery实现复选框的全选、反选以及获取选中值的功能。 首先，我们需要理解jQuery的基本用法。jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理和Ajax交互等任务。引入jQuery...
总之，jQuery的全选、反选和获取选中值是前端开发中常用的功能，熟练掌握这些技巧能够提升用户体验，使得用户在多选操作时更加便捷。通过学习和实践这些例子，你可以在你的网页应用中轻松实现类似功能。
在jQuery库的帮助下，这个任务变得非常简单和直观，正如标题“Jquery CheckBox全选方法代码附js checkbox全选反选代码”所示。这里我们将详细讲解如何使用jQuery实现全选和反选的功能，并对比JavaScript的实现方式。...
在jQuery中，处理复选框（CHECKBOX）的全选和反选操作是常见的需求，尤其是在数据筛选或批量操作的场景下。这里介绍一个官方提供的函数`CheckboxGroup`，它简化了这一过程。该函数在2018年6月18日的最新版本中发布，...
jQuery通过CSS选择器来定位DOM元素，如`$("#id")`用于选取ID为"id"的元素，`$(".class")`用于选取类名为"class"的所有元素，`$("input[type=checkbox]")`则可以选取所有的复选框。 在实现复选框全选功能时，我们...
总的来说，这个例子巧妙地利用了jQuery的事件绑定和自定义属性，实现了复选框列表的全选和反选功能，同时保持了代码的高封装性和低耦合性。这种设计模式使得代码可复用性强，易于维护，并且减少了HTML和JavaScript...
标题“JQ全选和反选和取消”涉及的是jQuery中处理多选元素，如复选框或表格行的选择状态。在这个主题下，我们将深入探讨如何实现全选、反选以及取消选择的功能，并结合给出的`demo.html`文件进行实例分析。 1. **...