`
271788203
  • 浏览: 490172 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

jquery input checked全选与反选1.3.2的版本

阅读更多

“运行代码”后需要“刷新一次”:

<!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> 
<title>无标题页</title> 
<script language="javascript" type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></script> 
<script language="javascript" type="text/javascript"> 
$.fn.checkCbx = function(){ 
return this.each(function(){ 
this.checked = !this.checked; 
}); 
} 
$(function(){ 
$("#btnSelect").click(function(){ 
this.value = this.value == "全选"?"反选":"全选"; 
$("input:checkbox").checkCbx(); 
}) 
}) 
</script> 
</head> 
<body> 
<form name="form1" method="post" action="Default8.aspx" id="form1"> 
<table border="1"> 
<tr> 
<th>选择</th> 
<th>id</th> 
<th>姓名</th> 
</tr> 
<tr> 
<td><input type="checkbox" name="cbx" /></td> 
<td>1</td> 
<td>脚本之家</td> 
</tr> 
<tr> 
<td><input type="checkbox" name="cbx" /></td> 
<td>2</td> 
<td>脚本之家</td> 
</tr> 
<tr> 
<td><input type="checkbox" name="cbx" /></td> 
<td>3</td> 
<td>脚本之家</td> 
</tr> 
<tr> 
<td><input type="checkbox" name="cbx" /></td> 
<td>4</td> 
<td>脚本之家</td> 
</tr> 
<tr> 
<td><input type="checkbox" name="cbx" /></td> 
<td>5</td> 
<td>脚本之家</td> 
</tr> 
<tr> 
<td><input type="checkbox" name="cbx" /></td> 
<td>6</td> 
<td>脚本之家</td> 
</tr> 
<tr> 
<td><input type="checkbox" name="cbx" /></td> 
<td>7</td> 
<td>脚本之家</td> 
</tr> 
<tr> 
<td><input type="checkbox" name="cbx" /></td> 
<td>8</td> 
<td>脚本之家</td> 
</tr> 
<tr> 
<td><input type="checkbox" name="cbx" /></td> 
<td>9</td> 
<td>脚本之家</td> 
</tr> 
<tr> 
<td><input type="checkbox" name="cbx" /></td> 
<td>10</td> 
<td>脚本之家</td> 
</tr> 
</table> 
<input id="btnSelect" type="button" value="全选" /> 
</form> 
</body> 
</html> 

 

分享到:
评论

相关推荐

    JQuery插件之全选与反选

    本主题将深入探讨jQuery中的"全选"与"反选"功能,这是一个常见且实用的功能,尤其是在处理多选框(Checkbox)的场景中。 全选与反选功能在用户界面设计中十分常见,例如在批量选择数据项、同意服务条款或选择订阅...

    Jquery实现全选和反选功能

    本教程将深入探讨如何使用jQuery实现全选和反选功能,这在多选列表或表格中非常常见,例如在批量处理数据时。 全选和反选功能的核心在于同步用户界面中的复选框状态。当用户点击一个主复选框(通常标记为“全选”)...

    Js/Jquery 实现checkbox全选,反选,全不选

    本文将详细讲解如何通过JS和jQuery实现checkbox的全选、反选以及全不选功能。 首先,我们需要理解HTML中的复选框元素`&lt;input type="checkbox"&gt;`,它允许用户在一组选项中进行多选。为了实现全选、反选和全不选的...

    jquery全选反选全不选案例

    "jquery全选反选全不选案例" 是一个常见的交互功能,常见于表格或者列表中,允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...

    jquery实现checkbox全选、反选、全部选。精简写法

    jquery实现checkbox全选、反选、全部选,很不错的资源,欢迎大家下载学习var langType=""; var arLangType = []; $("[name='langType'][checked]").each(function(i) { arLangType[i]=$(this).val(); }); ...

    TreeView CheckBoxes 全选与反选

    反选功能与全选类似,只是在全选的基础上改变逻辑。当用户取消顶级节点的选中状态时,所有子节点都应该被取消选中。代码如下: ```csharp private void UnselectAllNodes(TreeNode node) { node.Checked = ...

    jQuery全选、反选与获取选中值

    本文将深入探讨jQuery中关于“全选”、“反选”以及“获取选中值”的相关知识点,帮助你更好地理解和应用这些功能。 ### 一、jQuery全选 全选功能通常应用于多选列表或表格中,允许用户一次性选择所有选项。在...

    jquery、js操作checkbox全选反选.docx

    ### jQuery与JavaScript操作Checkbox全选反选 #### 一、引言 在Web开发中,Checkbox(复选框)是一种非常常见的用户界面元素,用于收集用户的多选输入。尤其是在表单设计时,Checkbox的全选与反选功能极大地方便了...

    WPF CheckBox全选、反选比较通用

    在开发用户界面时,特别是在涉及到多选列表时,全选和反选功能是常见的需求。本教程将详细介绍如何在WPF中实现CheckBox的全选和反选功能。 首先,我们需要理解CheckBox的基本用法。在XAML中,我们可以创建一个...

    复选框的全选和反选、复选框的全选和反选

    反选功能与全选类似,但它的目的是取消所有已选中的复选框。以下是一个反选的JavaScript示例: ```javascript function deselectAll() { var checkboxes = document.getElementsByName('checkboxName'); for (var...

    checkbox实现全选和反选经典例子

    这可以通过监听全选Checkbox的`CheckedChanged`事件来实现,然后遍历DataGridView的所有行,设置每一行的Checkbox为与全选Checkbox状态一致。 - **反选功能**:反选意味着取消所有已选中的项。这可以通过再次触发...

    js, jQuery实现全选、反选功能.docx

    在JavaScript和jQuery中,全选和反选功能是常见的交互设计,主要用于用户界面中的复选框操作。在表格、列表或者其他需要多选的场景中,全选和反选功能能够大大提高用户体验。以下将详细介绍如何使用JavaScript和...

    三种方式实现checkbox全选,反选

    全选和反选功能在多选列表中尤其常见,例如在批量操作或者多条件筛选时。以下是三种实现Checkbox全选和反选的方法,以及它们的JavaScript和Java实现细节。 ### 方法一:使用`checked`属性 **JavaScript实现**: 在...

    js实现全选和反选功能

    全选与反选 &lt;input type="checkbox" id="selectAll" onclick="selectAll()"&gt; 全选 &lt;input type="checkbox" name="item" value="1"&gt; &lt;input type="checkbox" name="item" value="2"&gt; &lt;input type=...

    Jquery 1.42 checkbox 全选和反选代码

    在这个例子中,我们将详细解析如何使用jQuery 1.4.2版本实现复选框的全选和反选功能。 首先,我们需要引入jQuery库。在HTML代码中,可以看到引入了`jquery-1.4.2.min.js`文件,这是jQuery的核心库: ```html ...

    vue+vant-UI框架实现购物车的复选框全选和反选功能

    ### Vue+Vant-UI框架实现购物车复选框全选和反选功能 #### 1....在实际应用中,除了全选与反选之外,还可以进一步扩展更多功能,例如批量删除、价格计算、库存检查等,为用户带来更流畅的购物体验。

    一个基于jQuery 实现的的全选、反选复选框插件源码例子

    如果这是一个源码文件,那么它应该包含了上述提到的jQuery实现的复选框全选反选功能的完整代码。 总结起来,这个基于jQuery的全选、反选复选框插件源码例子涉及到了jQuery的选择器、属性操作、事件处理、可能还有...

Global site tag (gtag.js) - Google Analytics