`

jQuery学习笔记46--复选框全选,反选,取消选择

阅读更多
<script type="text/javascript">
$(function() {
//全选
$("#selectall").click(function() {
$("input[@name='shareuser']").each(function() {
$(this).attr("checked", true);
});
});
//反选
$("#fanall").click(function() {
$("input[@name='shareuser']").each(function() {
if($(this).attr("checked"))
{
$(this).attr("checked", false);
}
else
{
$(this).attr("checked", true);
}
});
});
//取消全部
$("#deselectall").click(function() {
$("input[@name='shareuser']").each(function() {
$(this).attr("checked", false);
});
});
//alert
$("#alertall").click(function() {
$("input[@name='shareuser']").each(function() {
if($(this).attr("checked"))
{
alert($(this).val());
}
});
});

});
</script> 
 

程序代码:

<input type='checkbox' id='in-shareuser-10' name='shareuser' value='10' />10
<input type='checkbox' id='in-shareuser-11' name='shareuser' value='11' />11
<input type='checkbox' id='in-shareuser-12' name='shareuser' value='12' />12

<input type="button" id="selectall" name="selectall" value="全选" />
<input type="button" id="fanall" name="fanall" value="反选" />
<input type="button" id="deselectall" name="deselectall" value="取消" />
<input type="button" id="alertall" name="alertall" value="输出" /> 
 
$('input[name="checkbox"]').each(function(){
    $(this).attr("checked",!$(this).attr("checked"));
  });
 
分享到:
评论

相关推荐

    Axure RP 复选框全选、反选

    用Axure RP 8.0做的原型设计列子,作用是复选框做全选和非全选,已选的做反选。可以学习下反选或非反选的交互思路。

    axure复选框全选反选效果.rp

    axure复选框全选反选效果.rp

    javascript 实现复选框全选/取消功能

    ### JavaScript 实现复选框...通过本篇文章的学习,我们了解了如何使用 JavaScript 实现复选框的全选与取消全选功能。这种功能在很多场景下都非常实用,如购物车、表格选择等。掌握这一技能有助于提高前端开发的能力。

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

    其中,复选框全选和反选功能可以帮助用户快速选择或取消选择购物车中的全部商品。本文档将会介绍如何使用Vue.js结合Vant-UI组件库来实现这一功能。 #### 2. Vant-UI和Vue.js简介 **Vue.js** 是一个构建用户界面的渐...

    JQ 复选框全选反选

    总结来说,"JQ 复选框全选反选"是jQuery中常见的用户交互功能,通过选择器定位复选框,绑定事件处理函数,以及利用DOM操作改变元素属性,可以轻松实现这一功能。在实际开发中,理解并掌握这些基础技巧对于提升用户...

    基于jQuery的三个JS复选框全选反选例子.zip

    本示例“基于jQuery的三个JS复选框全选反选例子.zip”聚焦于如何利用jQuery实现复选框的全选与反选功能,这在表格或者多选项选择场景中非常常见。以下将详细介绍这一功能的实现方式。 首先,我们需要理解复选框...

    JS实现复选框全选反选

    JS实现复选框全选反选

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

    在HTML的表格中实现复选框的全选与反选功能,能够大大提升用户体验,使用户可以便捷地选择一组数据。这里我们将详细探讨如何通过JavaScript和HTML来实现这一功能。 首先,我们需要创建一个包含复选框的HTML表格。...

    多选框全选反选

    ### 多选框全选与反选功能实现 在网页开发中,经常需要用到表单来收集用户的选择。其中,多选框(复选框)是一种常见的控件类型,用于允许用户选择一个或多个选项。本篇文章将详细介绍如何利用JavaScript实现多选框...

    带复选框的多级目录树,复选框的选择控制子节点父节点 全选和反选

    在IT领域,尤其是在前端开发中,构建用户界面时经常需要处理多级目录树结构,并且在这样的结构中加入复选框功能,以便用户可以进行批量选择或者全选、反选操作。这种技术常用于文件管理器、权限设置、菜单配置等场景...

    微信小程序获取复选框全选反选选中的值(实例代码)

    在微信小程序开发中,获取复选框全选与反选的选中值是一个常见需求。本文将详细讲解如何通过实例代码实现这一功能,并会详细说明相关知识点。 首先,我们需要了解微信小程序中几个关键组件的使用方法,包括`...

    复选框全选、全不选和反选的效果实现.rar

    在网页设计和开发中,复选框(Checkbox)是一种常见的用户界面元素,用户可以通过它来选择或取消选择多个...通过学习和理解这些代码,开发者可以掌握实现复选框全选、全不选和反选效果的核心技术,从而提升网页交互性。

    spreadjs_列头添加复选框全选功能-demo.zip

    4. 反向同步:当用户手动选择或取消选择单元格时,同步更新复选框的状态,以反映当前选择的状态。 总的来说,通过SpreadJS,我们可以轻松地在Web应用中实现与Excel类似的功能,包括列头复选框全选。借助提供的示例...

    C#复选框实现全选反选和全不选

    在本教程中,我们将探讨如何利用C#实现复选框来控制DataGridView的数据全选、反选以及全不选,并在选中复选框后改变行的颜色。这将涉及到事件处理、数据绑定、自定义样式等多个方面。 首先,我们需要创建一个包含复...

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

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

    jquery全选反选全不选案例

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

    jquery全选反选插件

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

    jquery特效制作复选框,全选,反选,取消,购物车,统计价格,统计

    在这个项目中,我们关注的是使用jQuery来实现一些特定的功能,这些功能包括复选框的操作(全选、反选、取消选择)以及购物车中的商品价格统计。 首先,让我们深入了解一下复选框的操作。在HTML中,复选框是通过`...

    js checkbox全选 反选 取消全部设置表单html复选框

    "js checkbox全选 反选 取消全部设置表单html复选框"这个标题描述了一个常见的功能需求,即通过JavaScript控制HTML中的复选框(checkboxes),实现全选、反选和取消全部选中的功能。在本文中,我们将深入探讨如何...

    jquery实现复选框全选和反选

    《锋利的jquery》利用jquery实现复选框的全选和反选

Global site tag (gtag.js) - Google Analytics