Js把checkbox全选

操作方法

  • 01

    批量删除网站记录时,通常要用 js 在客户端把待删除的记录全部选中,再在服务器端把选择的记录都删除。而选中记录一般都是选中记录前的 checkbox 复选框,为易于理解,下面用一个实例具体说明。 1、实例 HTML 代码 假如有一张产品表格,它是由“产品名称”和“价格”2个字段组成,此外前面还有一个供选中记录的 checkbox;表格的下面还有一个选中所有记录的 checkbox(name="selectAll")。该表格是 dl dt dd + css 实现的, 具体代码如下: <dl id="product">    <dt><span>选择</span><span>产品名称</span><span>价格</span></dt> <dd><span><inputname="1" type="checkbox"/></span></dd>    <dd><span>数码相机</span></dd>    <dd><span>2200</span></dd> <dd><span><inputname="2" type="checkbox"/></span></dd>    <dd><span>笔记本电脑</span></dd>    <dd><span>3500</span></dd> <dd><span><inputname="3" type="checkbox"/></span></dd>    <dd><span>电脑硬盘</span></dd>    <dd><span>420</span></dd>  </dl>  <div><input name="selectAll"type="checkbox" onclick=="selectAllCheckBox('product',this.checked)"/>全选</div> 表格图片如下: 2、用Js一个简单的方法把全部 checkbox 选中 当单击“全选”前面的 checkbox(name="selectAll")时,js 通过循环的方式把所有记录都选中,具体思路如下: 首先,获得表格的父对象(pID),再选择该范围内的所有类型为 input 的 HTML 标签,然后循环遍历所有 input,如果类型是 checkbox,则选中, 代码如下: 调用方法:selectAllCheckBox('product',this.checked);//见HTML代码最后一行 该方法经过验证没有错误,且兼容 ie、Firefox 等主流浏览器,直接就可以调用,十分方便。 最后说明一点:例中是用 dl dt dd + css 实现的表格,其实用什么表格都没有关系,只要把“表格本身的ID或表格的ID” 传递给selectAllCheckBox 方法,都可以全部选中。

(0)

相关推荐

  • js:复选框, 点击全选 再次点击取消。

    js:复选框, 点击全选 再次点击取消。

  • jQuery怎样实现全选功能和全不选功能呢

    全选功能在网页中也是非常常见的,比如购物平台的购物车就有全选和全不选的功能,今天咪咪我就来教教大家怎样用jQuery来实现这些功能. 操作方法 01 如图,先设置好一些简单的可勾选的选项,这里我就设置 ...

  • 复选框全选功能怎么实现

    复选框的全选是前端开发人员经常需要开发的功能,这个功能简而言之就是,点击全选就可以选中所有的复选框,那么我们怎么才能实现这个功能呢?笔者来告诉大家,来给大家一点提示,代码不是唯一的(下图gif即为实现 ...

  • 用jquery怎么实现全选/全不选

    在网站设计的过程中,可能会遇到关于全选/全不选的问题,那么我们如何来解决这个问题那? 操作方法 01 HTML代码: <table> <tr> <td><in ...

  • jquery学习之全选反选

    全选反选在网页设计中是经常常用的,必须牢牢掌握,今天通过一个小例子为大家展示如何实现全选反选,希望大家掌握 操作方法 01 打开textpad文本编辑器,如下图所示,建立文本,也可以使用其它设计工具: ...

  • word中全选的快捷键介绍及使用方法

    word中全选快捷键 全选快捷键可以提高我们在操作word时工作效率,在操作Word2003中怎么对文档中的文字进行全选呢?下面为大家提供几种全选的方法,绝对好用。Word怎样全选? 方法一、使用Wo ...

  • 优酷客户端如何多选.全选操作转码任务?

    您可通过Shift、Ctrl键进行全选或多选“转码中”、“已转码”页面列表中的任务进行操作,同时也可通过快捷键Ctrl+A选择全部任务进行操作哦。

  • 电脑全选快捷键是什么

    首先电脑全选快捷键是Ctrl+A组合键,也就是在ctrl+字母A键的组合。如果你现在在用记事本或者qq聊天的话,尝试用该组合键来全选文本内容吧。是不是很方便啊,就不需要自己用鼠标来框选了吧。如图所示: ...

  • EXCEL2010使用技巧之全选操作

    EXCEL2010具有很多的功能,能够编辑表格个处理数据,在我使用表格的时候,有时候需要整体进行操作,那么,如何对EXCEL2010表格的进行全选呢?具体操作方式如下: 第一种方式 直接使用鼠标进行拉 ...