文章源自:http://viralpatel.net/blogs/multiple-checkbox-select-deselect-jquery-tutorial-example/
Multiple Checkbox Select/Deselect using jQuery – Tutorial with Example
Almost all the user interfaces that I have created had this functionality of selecting multiple items from a list to process them or delete them. Although its very very easy to implement this functionality in Javascript, using jQuery for this is real fun. I will show you a simple implementation of adding multiple checkbox select and deselect functionality to any webpage. We will have a table with some data in it and checkbox in each row. There will be a select all checkbox in the header of the table. If user select/deselect the selectall checkbox, all the checkbox in table will get selected or deselected accordingly. Now one more thing we would like here to add is, suppose user select all the checkbox one by one then the selectall checkbox should be automatically gets selected. And if user click selectall first and then unchecks any of the checkbox, then the selectall also should be unchecked automatically.
The HTML
<HTML>
<HEAD>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<TITLE>Multiple Checkbox Select/Deselect - DEMO</TITLE>
</HEAD>
<BODY>
<H2>Multiple Checkbox Select/Deselect - DEMO</H2>
<table border="1">
<tr>
<th><input type="checkbox" id="selectall"/></th>
<th>Cell phone</th>
<th>Rating</th>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
<td>BlackBerry Bold 9650</td>
<td>2/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
<td>Samsung Galaxy</td>
<td>3.5/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
<td>Droid X</td>
<td>4.5/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
<td>HTC Desire</td>
<td>3/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>
<td>Apple iPhone 4</td>
<td>5/5</td>
</tr>
</table>
</BODY>
</HTML>
The jQuery Code
Add following jQuery code in HEAD section of above HTML
<SCRIPT language="javascript">
$(function(){
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function(){
if($(".case").length == $(".case:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
});
</SCRIPT>
Here in above code at line 05, we register a handler on click of selectall checkbox. On click of this checkbox, we check/uncheck all checkbox in the datatable.
Also check the link 13, where we check the selectall checkbox, if all the checkbox are selected manually. To get more idea, play with the below demo.
相关推荐
**jQuery Select2组件详解** `jQuery Select2`是一款强大的、高度可定制的下拉选择框插件，它在原生HTML `<select>` 元素的基础上提供了丰富的功能和优秀的用户体验。这款组件广泛应用于网页开发中，使得传统的单选...
在IT领域，特别是前端开发中，获取用户界面元素如`checkbox`、`select`和`radio`的选择状态是一项常见的需求。这些元素常用于收集用户的偏好或输入，因此准确地读取它们的`text`（显示文本）和`value`（实际值）对于...
本文将详细讲解如何使用jQuery来操作checkbox，并实现全选、全不选、反选以及获取选中值这四个核心功能。 ### 一、jQuery选择器与checkbox操作 在jQuery中，我们可以使用不同的选择器来选取页面上的checkbox元素。...
Highlight GridView Rows when Checkbox is checked using jQuery Highlight Negative value columns in ASP.NET GridView using jQuery Searching and Filtering Related How to loop through all grid ...
这些是jQuery对Radio、Checkbox和Select基本的操作方式。在实际应用中，你可能还需要结合DOM遍历、事件冒泡等知识，实现更复杂的交互功能。提供的Demo文件应该包含了这些操作的实例代码，通过查看和实践，可以加深...
"checkbox全选/取消全选以及checkbox遍历jQuery实现代码" CheckBox全选/取消全选是指在一个CheckBox组中，选择或取消选择所有CheckBox的功能。这种功能在实际应用中非常常见，例如在多选题中，用户可以选择所有选项...
昨天网上找了很多关于设置select checkbox radio只读的，都没办法满足要求，自己写了一个
jquery 树形 checkbox jQuery(document).ready(function(){ jQuery(".mytree").checkboxTree({ collapsedarrow: "images/checkboxtree/img-arrow-collapsed.gif", expandedarrow: "images/checkboxtree/img-...
在网页开发中，表格（Table）是展示数据的常用组件，而jQuery库为开发者提供了丰富的API，使得操作表格中的元素，如复选框（Checkbox），变得更加便捷。本篇将详细探讨如何利用jQuery实现表格中checkbox的相关事件...
jQuery有些版本中实现CheckBox全选/全不选/反选会有bug，经测试jquery-1.3.1.js–>测试通过，jquery-1.5.1.js–>测试不通过。 实现CheckBox全选/全不选/反选代码如下： <%@ page language="java" ...
实现技术: 无刷新 验证指定字符 验证数字 验证邮箱 无刷新下拉菜单三级联动 CheckBox全选/反选/删除 等等.. 程序收集了本人在ASP.NET开发应用中会经常用到的轻量级的AJAX小例子，程序里面很多地方做了注释，通俗易懂...
jQuery插件只可以用val方法给input标签的text、...而checkbox、radio属性和select标签就无法直接赋值，必须用遍历的方法使对应项选中。 我自己写了一个jQuery的插件，可以直接用setval方法像赋值一样设定选中项。
对于“jQuery的checkbox样式”，这是一个关注于提升网页中复选框（checkbox）视觉效果的主题。在这个场景中，我们讨论的是一个基于jQuery的插件，它专门用于美化标准HTML复选框的样式。 该插件的名称可能为“jQuery...
以上就是jQuery操作checkbox和select的基本方法。在实际应用中，这些操作常用于实现表单验证、数据提交等功能。在给定的文件中，`index.html`可能是展示这些操作的示例页面，而`jquery-1.4.2.min.js`是jQuery库的...
**jQuery 复选框组件详解** 在Web开发中，复选框（Checkbox）是一种常见的用户交互元素，用于让用户从多个选项中选择一个或多个。jQuery，作为一款强大的JavaScript库，提供了丰富的插件和方法来增强复选框的功能和...
// select all checkboxes with class 'myCheckboxes' $(".myCheckboxes").prop("checked", false); // unselect all ``` 六、与其他元素关联 jQuery允许你根据checkbox的状态改变其他元素的属性。例如，当一个...
这种组件常被称为“CheckBox的Select”组件，它提供了比标准单选`<select>`更灵活的选择体验。 1. **基本HTML结构** 多选下拉框的基本结构通常包括一个隐藏的`<select>`元素和一组可见的`<label>`与`<input type="...
在IT行业中，`checkBox` 和 `selectAll` 是两个常见的概念，尤其在前端开发领域。`checkBox` 是一种用户界面元素，通常称为复选框，它允许用户从多个选项中选择一个或多个。而 `selectAll` 功能则常用于提供一个快捷...
在本文中，我们将深入探讨如何使用jQuery UI Multiselect插件来实现下拉多选checkbox的效果。这个插件是jQuery库的一个扩展，它为用户界面添加了一个功能丰富的多选下拉框，提供了美观且用户友好的多选选项。 首先...
2. **定义函数`selectAll`**：接下来定义了一个名为`selectAll`的JavaScript函数，该函数接收一个参数`checkbox`，即触发全选/反选的复选框。 ```javascript function selectAll(checkbox) { $('input[type=...