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

jquery插件,实现checkbox全选和得到选择的值。

阅读更多
/**
	 * 复选框批量选取
	 * 使用方法
	 * js
	 * $(function(){
	 * //初始化实现全选反选
	 * 	$("#all").myCheckbox();
	 * //返回选中checkbox的value值
	 * $("#all").myCheckbox.val();
	 * });
	 * html:
	 * 全选<input id="all" type="checkbox"/>
	 * <input  type="checkbox" value="1"/>
	 * <input  type="checkbox" value="2"/>
	 * <input  type="checkbox" value="3"/>
	 * <input  type="checkbox" value="4"/>
	 */
	$.fn.myCheckbox = function () {
			$(this).live('click', function(){
		    if($(this).attr("checked")==false) {
		         $(this).parents("table").find(':checkbox').attr('checked','');
		    } else {
		         $(this).parents("table").find(':checkbox').attr('checked','checked');
		    }
		});
	};
	$.fn.myCheckbox.val = function (check) {
		var list = new Array();
		var i = 0;
		$(this).find("input:checkbox[checked]").not($("input:checkbox[id]")).each(function(){
			list[i] = $(this).val();
			i++;
		});
		return list;
	}
分享到:
评论

相关推荐

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

    在网页开发中,jQuery 是一个广泛使用...通过以上介绍,我们可以利用 jQuery 实现复选框的全选、反选和全不选功能,同时结合表单验证插件,确保用户按照规定进行输入。在实际应用中,可以根据具体需求进行调整和优化。

    jQuery插件-多选全选实时搜索下拉框

    "jQuery插件-多选全选实时搜索下拉框"就是这样一个工具,它结合了多选、全选以及实时搜索的功能,极大地优化了用户在选择项时的操作体验。 **一、jQuery基础知识** jQuery是由John Resig于2006年创建的,它的核心...

    JQuery插件之全选与反选

    除了全选和反选,我们还可以实现级联选择,即当用户手动勾选一个子Checkbox时,全选Checkbox自动根据子Checkbox的状态更新。这可以通过监听子Checkbox的`change`事件实现: ```javascript $('.item').on('change', ...

    jQuery实现checkbox全选功能完整实例

    本文主要介绍了使用jQuery来实现网页中checkbox全选功能的完整实例。通过这个实例,读者可以学习到如何通过jQuery的事件响应机制来动态控制页面上元素的属性,特别是在处理复选框全选/取消全选逻辑时的应用技巧。 ...

    jquery全选反选插件

    首先,jQuery全选反选插件的核心功能是实现复选框的批量选择。在网页上,当用户需要对一组选项进行全部选中或全部取消时,这种功能特别实用,例如在数据筛选、表单提交等场景。插件通常通过监听复选框的变化,来控制...

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

    jQuery插件的创建通常包括一个自定义函数,该函数接受参数并返回一个新的jQuery对象。这个函数内部会定义一些方法和事件处理器。例如: ```javascript (function($) { $.fn.extend({ checkboxSelect: function...

    GridView使用div分页,checkbox全选

    - 为了实现高效的数据加载,可以使用分页插件,如jQuery的PagedList插件,它提供了方便的API来处理分页。 - 考虑到SEO和非JavaScript用户的体验,应提供服务器端的分页备份方案。 - 在处理大量数据时,要合理设置...

    JQUERY CHECKBOX全选,取消全选,反选方法三

    ### JQUERY CHECKBOX全选与取消全选 在JQUERY中实现CHECKBOX的全选和取消全选是前端开发中的基础操作,开发者通过绑定点击事件到一个全选复选框上,以控制其他所有复选框的选中状态。通常,全选操作会使所有复选框...

    jquery复选框_全选_反选_取消_选中输出等功能用jquery特效和jquery插件两种表单特效

    - 这里定义了一个XHTML文档的基本结构,引入了jQuery库和一个名为`jquery.checkbox.js`的jQuery插件文件。 ##### 2. jQuery特效实现 - **全选功能** ```javascript $("#allselect").click(function(){ $("....

    json获取datatable后生成table分页显示checkbox全选

    "json获取datatable后生成table分页显示checkbox全选"这个主题涵盖了几个重要的JavaScript和前端开发技术,这些技术有助于提升用户体验并优化服务器资源。以下是这些知识点的详细说明: 1. **JSON (JavaScript ...

    模拟select带checkbox全选反选取消插件tomcat发布使用

    这个“模拟select带checkbox全选反选取消插件”是一个专门为了解决这个问题而设计的工具。它允许用户通过复选框(checkbox)进行多选操作,并提供了全选、反选和取消选择的功能,极大地方便了用户交互。 首先,让...

    jQuery基于layui插件制作checkbox复选框选中代码

    在本文中,我们将深入探讨如何使用jQuery和layui插件来创建功能丰富的checkbox复选框,包括权限范围的多选、单选以及全选操作。同时,我们也将关注于父级和子级复选框之间的联动关系,即父级选中时子级全部选中,而...

    基于jQuery的checkbox全选问题分析

    在前端开发中,checkbox全选功能是一个常见的需求,它主要用于表单中对多个选项进行统一的选择操作。当使用jQuery库来操作DOM时,我们可能会遇到一些问题,尤其是在处理全选逻辑时。本文将详细介绍如何使用jQuery...

    jQuery实现checkbox全选、反选及删除等操作的方法详解

    为了保持代码的可维护性和可重用性,可以将这些功能封装为jQuery插件或者模块。例如,你可以创建一个`checkboxManager.js`文件,包含如下内容: ```javascript (function($) { $.fn.checkboxManager = function...

    多个jquery.datatable共存,checkbox全选异常的快速解决方法

    在网页开发中,jQuery DataTables 是一款非常流行的插件,用于创建交互式、功能丰富的数据表格。然而,当在一个页面中使用多个 DataTables 实例时,可能会遇到全选复选框(checkbox)行为异常的问题。这个问题主要是...

    小测试:jquery的全选插件

    在iteye这样的技术社区,博主通常会分享代码示例和实现步骤,帮助开发者理解和应用这类插件。 标签“源码”意味着我们将接触到实际的JavaScript代码,可能是jQuery插件的实现代码,通过分析源码,我们可以学习到...

    jQuery表格行全选反选单选代码.zip

    tableCheckbox.js是一个专门为此目的设计的jQuery插件。它扩展了基础的jQuery功能,为表格添加了行级别的复选框操作。这个插件通常包括以下关键特性: 1. **行选中与反选**:当用户点击表格行时,插件会检测并更改...

    jQuery基于layui插件制作checkbox复选框选中代码.zip

    本项目是基于jQuery和layui插件制作的checkbox复选框选中代码,非常适合那些需要在网页上实现复选框功能的开发者。 首先,`index.html`是项目的主页面文件,它包含了HTML结构和引用的外部资源。在HTML中,你需要...

    jQuery 插件 表格高亮显示选中行 全选、反选(四种模式)

    在本文中,我们将深入探讨如何使用jQuery插件来实现表格中的行高亮显示以及全选、反选功能。这个插件特别适用于数据展示和交互性强的网页应用,它提供了四种不同的工作模式,使得用户可以更加方便地管理和操作表格...

Global site tag (gtag.js) - Google Analytics