昨天群里一个朋友 问了一些关于jquery 操作checkbox的问题，今天写了一个小小的例子，供大家参考
例子里面包括了一下几个功能。
<input type="button" id="btn1" value="全选">
<input type="button" id="btn2" value="取消全选">
<input type="button" id="btn3" value="选中所有奇数">
<input type="button" id="btn4" value="反选">
<input type="button" id="btn5" value="获得选中的所有值">
代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<SCRIPT LANGUAGE="JavaScript" src="http://www.cnjquery.com/demo/jquery.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
$("document").ready(function(){
$("#btn1").click(function(){
$("[name='checkbox']").attr("checked",'true');//全选
})
$("#btn2").click(function(){
$("[name='checkbox']").removeAttr("checked");//取消全选
})
$("#btn3").click(function(){
$("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
})
$("#btn4").click(function(){
$("[name='checkbox']").each(function(){
if($(this).attr("checked"))
{
$(this).removeAttr("checked");
}
else
{
$(this).attr("checked",'true');
}
})
})
$("#btn5").click(function(){
var str="";
$("[name='checkbox'][checked]").each(function(){
str+=$(this).val()+"\r\n";
//alert($(this).val());
})
alert(str);
})
})
//-->
</SCRIPT>
</HEAD>
<BODY>
<form name="form1" method="post" action="">
<input type="button" id="btn1" value="全选">
<input type="button" id="btn2" value="取消全选">
<input type="button" id="btn3" 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
</form>
下载附件演示
分享到：
相关推荐
jQuery 对checkbox的操作
### 一、jQuery选择器与checkbox操作 在jQuery中，我们可以使用不同的选择器来选取页面上的checkbox元素。例如，使用`$('input[type="checkbox"]')`可以选取所有类型的checkbox。如果想要选取特定ID的checkbox，...
在本示例中，我们关注的是 jQuery 对 checkbox 的操作，特别是如何进行全选、反选、取消全选以及按特定条件选择 checkbox。下面将详细解析这些功能的实现方式： 1. **全选**： 当用户点击“全选”按钮（id="btn1...
这包括在标签内添加对jQuery库的引用，如`<script src="https://code.jquery.com/jquery-3.x.y.min.js"></script>`，以及引入插件的JS和CSS文件，例如`<link rel="stylesheet" href="jquery-checkbox.1.3.0.css">`和...
在本教程中，我们将深入探讨如何使用jQuery来操作checkbox元素，特别是动态生成、设置显示数量以及获取选中项等核心知识点。 首先，让我们了解checkbox的基本概念。Checkbox是HTML中的一个表单元素，用于让用户对一...
本篇文章将深入探讨如何使用jQuery来操作checkbox和radio元素，这两种元素在表单提交和用户交互中扮演着重要角色。 首先，让我们了解checkbox和radio的基本概念。Checkbox用于提供多选选项，用户可以勾选多个选项；...
2. **调用插件方法**：然后，对选取的元素调用`.checkbox()`方法，这会将它们转化为jQuery-Checkbox的效果。代码如下： ```javascript $(".custom-checkbox").checkbox(); ``` 3. **配置选项**：jQuery-Checkbox...
本教程将深入探讨jQuery如何对HTML中的checkbox元素进行操作，以提高用户体验和页面交互性。 首先，我们需要理解HTML中的checkbox。Checkbox是用户界面中的一种常见元素，用于让用户在多个选项中选择一个或多个。每...
在本文中，我们将深入探讨如何使用jQuery来获取checkbox选中的值，包括全选、取消全选、反选以及选中奇数行的操作，并讲解如何获取选中的值。 首先，我们需要引入jQuery库。在`1.html`文件中，我们看到包含了一个名...
在网页开发中，jQuery 是一个广泛使用的 JavaScript 库，它简化了 DOM 操作、事件处理以及Ajax交互。本文将深入探讨如何在jQuery环境下实现输入框（input）复选框（checkbox）的联动效果，即当某个复选框被选中时，...
本篇文章将深入探讨如何使用jQuery来操作checkbox元素，包括多选、全选和反选等常见功能。 一、jQuery选择checkbox 在jQuery中，我们可以使用`$('input[type="checkbox"]')`选择所有的checkbox。如果你想根据特定...
在JavaScript的世界里，jQuery是一个非常流行的库，它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。本文将深入探讨如何使用...在学习和实践时，结合这两个文件能更好地理解jQuery对表单元素的操作方式。
C#.net下通jQuery实现的由CheckBox来控件CheckBoxList的全选操作，通过CheckBox来全选CheckBoxList，当有一个CheckBoxList选中时，CheckBox则被选中，且并且可以取得选中的CheckBox和CheckBoxList的value和text
在网页设计中，jQuery是一种广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理和动画效果。本主题聚焦于“jQuery radio checkbox美化”，这涉及到如何使用jQuery和其他前端技术改进默认的HTML复选框...
### jQuery与JavaScript操作Checkbox全选反选 #### 一、引言 在Web开发中，Checkbox（复选框）是一种非常常见的用户界面元素，用于收集用户的多选输入。尤其是在表单设计时，Checkbox的全选与反选功能极大地方便了...
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理和Ajax交互等任务。本文将深入探讨如何使用jQuery来实现复选框（checkbox）的选中和取消选中功能，以及如何处理多选的情况。 ...
本文实例讲述了jQuery实现checkbox全选的方法。分享给大家供大家参考。具体分析如下： 通过checkbox 进行全选和取消全选的操作，如果通过toggle进行处理，则会出现checkbox无法显示对勾的问题。 使用click事件，根据...
在网页开发中，表格（Table）是展示数据的常用组件，而jQuery库为开发者提供了丰富的API，使得操作表格中的元素，如复选框（Checkbox），变得更加便捷。本篇将详细探讨如何利用jQuery实现表格中checkbox的相关事件...