使用JavaScript实现批量选择Checkbox

在网站开发中,经常需要对记录进行批量操作,其中一个常见需求是用JavaScript在客户端将待删除的记录全部选中,然后在服务器端执行相应的操作。通常情况下,我们会操作checkbox复选框来实现这一功

在网站开发中,经常需要对记录进行批量操作,其中一个常见需求是用JavaScript在客户端将待删除的记录全部选中,然后在服务器端执行相应的操作。通常情况下,我们会操作checkbox复选框来实现这一功能。下面通过一个具体实例来详细说明。

实例HTML代码

假设有一个产品表格,包含“产品名称”和“价格”两个字段,每条记录前都有一个用于选中的checkbox。此外,表格底部还有一个用于全选的checkbox(name"selectAll")。表格的结构是通过dl、dt、dd以及CSS来实现的,具体的代码如下:

```html

选择产品名称价格

数码相机

2200

笔记本电脑

3500

电脑硬盘

420

全选

```

使用JavaScript实现全选功能

当单击“全选”前面的checkbox(name"selectAll")时,通过JavaScript循环的方式将所有记录都选中。具体思路如下:

首先,获取表格的父对象(pID),然后选择该范围内所有类型为input的HTML标签,并循环遍历所有input。如果类型是checkbox,则选中。具体代码如下:

```javascript

function selectAllCheckBox(pID, isChecked) {

var parent (pID);

var checkboxes ("input");

for (var i 0; i < checkboxes.length; i ) {

if (checkboxes[i].type "checkbox") {

checkboxes[i].checked isChecked;

}

}

}

```

调用上述方法即可实现全选功能,该方法经过验证兼容主流浏览器,使用方便。无论表格采用何种形式实现,只要将表格的ID传递给selectAllCheckBox方法,就能实现批量选中的效果。

标签: