`
raisun_1988
  • 浏览: 117981 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

JQuery实现checkbox全选、不选、反选

    博客分类:
  • .Net
阅读更多

开发过程中,checkbox复选框的全选、不选、反选功能经常用到,例如后台操作多条记录的批量删除,前台兴趣爱好的多项选择等等.

假如现在有三个链接标签,一个实现全选,一个不选,一个反选,onclick的事件分别为:sel_all('1'),sel_all('0'),rev_sel().多项选择复选框的name属性为check_box.事件代码如下:

先在网页头部包含JQuery库文件(jquery是什么?).

01.//全选 、不选
02.function sel_all(checked){
03.    var check_obj = $("input[name='check_box']");
04.    for(var i=0; i<check_obj.length;i++){
05.        if(checked){
06.            check_obj.get(i).checked = true;
07.        }else{
08.            check_obj.get(i).checked = false;
09.        }
10.    }
11.    return;
12.}
13.  
14.//反选
15.function rev_sel(){
16.    var check_obj = $("input[name='check_box']");
17.    for(var i=0; i<check_obj.length;i++){
18.        check_obj.get(i).checked = ! check_obj.get(i).checked;
19.    }
20.    return;
21.}
22.  
23.//判断是否至少选择了一项
24.function count_sel(){
25.    var checked_num = $("input[name='check_box']:checked").length;
26.    if(checked_num == 0){
27.         alert('请至少选择一项吧!');
28.         return;
29.    }
30.    //多项选择后的操作代码(略)
31.}

 

http://www.itpob.cn/thread-10383-1-1.html

分享到:
评论

相关推荐

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

    在提供的文件“js实现checkbox全选,反选,全不选.htm”中,应当包含了上述功能的具体实现。通过查看源码,我们可以了解到实际的HTML结构以及jQuery脚本是如何与之配合的。这个文件可以作为一个示例,帮助我们更好地...

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

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

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

    在高级控件如DataGridView中,通过结合Checkbox可以实现全选和反选功能,为用户提供便捷的操作方式。这个经典例子将深入探讨如何在Web应用中实现这一功能。 1. **Checkbox基本概念** Checkbox是HTML中的一个表单...

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

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

    jquery 一个checkbox控制全选与反选

    页面上通过一个checkbox实现全选与反选

    jQuery实现复选框checkbox全选、反选功能.rar

    本示例中,我们关注的是如何使用jQuery来实现复选框(checkbox)的全选和反选功能,这对于构建具有交互性的表单或者需要用户进行多选操作的界面是非常实用的。 在HTML中,复选框通常由`&lt;input&gt;`标签定义,类型为...

    jquery全选反选全不选案例

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

    jquery 实现全选,全不选,反选,获取选中的值

    综上所述,使用 jQuery 实现全选、全不选、反选以及获取选中值的功能是相当直观和简单的。通过绑定事件处理器,我们可以轻松地响应用户的交互,动态地更新页面状态。结合 HTML 结构和适当的 CSS 样式,可以创建出...

    jquery Checkbox 全选 反选 全不选 多种实现方法

    在涉及到表单元素如复选框(Checkbox)时,经常需要实现全选、反选和全不选的功能。下面将详细探讨 jQuery 如何实现这些功能,以及如何进行表单验证。 1. **全选功能** 要实现全选功能,首先我们需要一个主复选框...

    全选不选反选jquery

    以上就是使用jQuery实现全选、不选和反选功能的基本步骤。在实际项目中,你可能需要根据具体需求进行调整,例如增加对分页或动态加载数据的支持。同时,为了提高性能,可以考虑使用事件委托,避免为每个复选框单独...

    jquery实现checkbox的全选和全不选

    jquery实现全选和全不选,只要有一个复选框没有选中,全选框不选中;

    Jquery实现全选和反选功能

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

    JQuery插件之全选与反选

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

    Jquery 1.42 checkbox 全选和反选代码

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

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

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

    jquery 全选,反选

    使用jquery实现 checkbox的 全选,反选

    JQuery实现checkbox的全/不全选,以及反选功能

    在本文中,我们将深入探讨如何使用jQuery来实现复选框(checkbox)的全选、全不选和反选功能。这些功能在表单处理、数据筛选等场景中非常常见。 首先,我们需要理解HTML中的复选框元素。`&lt;input type="checkbox"&gt;` ...

    利用jQuery实现CheckBox全选/全不选/反选的简单代码

    jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3.1.js–&gt;测试通过,jquery-1.5.1.js–&gt;测试不通过。 实现CheckBox全选/全不选/反选代码如下: &lt;&#37;@ page language="java" ...

    实现table表格checkbox复选框的全选 反选

    接下来,我们使用JavaScript(通常配合jQuery库,但也可以使用原生JS)来实现全选/反选功能。这里我们使用jQuery: ```javascript $(document).ready(function() { $('#selectAll').click(function() { if ($...

    checkbox 全选与反选

    在“checkbox全选与反选”的场景中,我们通常会遇到行全选、列全选以及相应的联动效果。下面将详细阐述这个主题的知识点。 一、全选与反选的基本原理 全选功能是通过一个主复选框控制所有子复选框的状态,当主复选...

Global site tag (gtag.js) - Google Analytics