Js把全部 checkbox 选中实现源代码

软件教程 2024-01-20

批量删除网站记录时，通常要用 js 在客户端把待删除的记录全部选中，再在服务器端把选择的记录都删除。而选中记录一般都是选中记录前的 checkbox 复选框，为易于理解，下面用一个实例具体说明。

1、实例 HTML 代码
假如有一张产品表格，它是由“产品名称”和“价格”2个字段组成，此外前面还有一个供选中记录的 checkbox；表格的下面还有一个选中所有记录的 checkbox（name="selectAll"）。该表格是 dl dt dd + css 实现的，具体代码如下：

<dd><span><input name="2" >type"checkbox" /></span></dd >
<dd><span>笔记本电脑</span></dd >
<dd><span>3500</span></dd>

2、用Js一个简单的方法把全部 checkbox 选中
当单击“全选”前面的 checkbox（name="selectAll"）时，js 通过循环的方式把所有记录都选中，具体思路如下：

首先，获得表格的父对象（pID），再选择该范围内的所有类型为 input 的 HTML 标签，然后循环遍历所有 input，如果类型是 checkbox，则选中，代码如下：

//ParentID 是表格本身的ID或表格的父ID
//bool 是 checkbox 当前状态（选中还是未选中）
function selectAllCheckBox(ParentID, bool)
{
var pID = document.getElementById(ParentID);
var cb = pID.getElementsByTagName("input");
for(var i = 0;i < cb.length; i++){
if(cb[i].type == "checkbox")
cb[i].checked = bool;
}
}

调用方法：selectAllCheckBox('product',this.checked);//见HTML代码最后一行

该方法经过验证没有错误，且兼容 Ie、Edge、Chrome、Firefox 等主流浏览器，直接就可以调用，十分方便。

最后说明一点：例中是用 dl dt dd + css 实现的表格，其实用什么表格都没有关系，只要把“表格本身的ID或表格的父ID” 传递给selectAllCheckBox 方法，都可以全部选中。

标签： Js把全部checkbox选中代码

上一篇：C#四舍五入的3种方法及源代码下一篇：js遍历获取xml中指定节点的值源代码

Js把全部 checkbox 选中实现源代码

热门文章

最新文章

标签列表