循环生成复选框
全选、全部选
全选的框
<input type="checkbox" id="chk_SelectAll" onclick="javascript:onSelectAll(this.checked);" />
循环的框
<input id="screenNumber" type="checkbox" name="checkbox" runat="server" nname='Id'
value='<%# Eval("screenNumber") %>' />
js代码
function onSelectAll(checked){
var objall=$("[nName='Id']:checkbox");
for(var i=0;i<objall.length;i++){
objall[i].checked=checked;
}
}
### 复选框相关代码详解
#### 一、概述
在网页开发中，复选框是一种常见的表单元素，主要用于收集用户的选择数据。本篇文章将详细介绍一个特定的复选框功能实现案例，其中包括如何通过JavaScript/jQuery实现“全选/全不选”功能以及前后端如何交互以获取选中的复选框值。
#### 二、全选/全不选功能实现
##### 2.1 HTML结构
在HTML中，我们通常会定义一个“全选”复选框和多个普通复选框：
```html
<input type="checkbox" id="chk_SelectAll" onclick="javascript:onSelectAll(this.checked);" />
<!-- 循环生成的复选框 -->
<input id="screenNumber" type="checkbox" name="checkbox" runat="server" nname='Id' value='<%# Eval("screenNumber") %>' />
```
这里的`<input id="screenNumber" ...>`部分通常是通过服务器端代码动态生成的，例如ASP.NET中的Repeater控件。每个复选框都有一个`nname`属性用于标识，方便后续JS代码进行操作。
##### 2.2 JavaScript逻辑
接下来是关键的JS代码，用于实现“全选”与“全不选”的功能：
```javascript
function onSelectAll(checked){
var objall = $("[nName='Id']:checkbox");
for (var i = 0; i < objall.length; i++) {
objall[i].checked = checked;
}
}
```
- **函数说明**：`onSelectAll`函数接收一个参数`checked`，表示是否选中。当全选复选框被点击时，该函数会被触发，并根据`checked`的值来设置页面上所有具有`nName='Id'`属性的复选框的状态。
- **选择器解析**：`$("[nName='Id']:checkbox")`使用jQuery选择器选取所有带有`nName='Id'`属性的复选框元素。
- **循环设置状态**：通过遍历所有选取的复选框，将其`checked`属性设置为`checked`参数的值，从而实现“全选”或“全不选”。
#### 三、获取选中的复选框值
##### 3.1 后台获取选中值
在后端（如ASP.NET）获取选中的复选框值通常涉及到遍历服务器端控件（如Repeater），并检查每个复选框的状态。示例代码如下：
```csharp
string screenNumbers = "";
foreach (RepeaterItem item in this.rp_Screens.Items) {
HtmlInputCheckBox check = (HtmlInputCheckBox)item.FindControl("screenNumber");
if (check.Checked) {
if (screenNumbers != "") screenNumbers += ",";
screenNumbers += check.Value;
}
}
// 分割字符串并处理
string[] tn = screenNumbers.Split(new string[]{","}, StringSplitOptions.RemoveEmptyEntries);
foreach (string tintn) {
GSMS.Queue.ScreenN.ScreenDAOFactory.GetInstance().CreateDAO().Delete(tintn);
}
```
- **获取选中复选框**：通过遍历`rp_Screens.Items`集合，查找每个项内的`screenNumber`复选框，并检查其`Checked`属性。
- **构建选中值字符串**：将所有选中的复选框的`Value`属性拼接成一个字符串`screenNumbers`。
- **分割并处理**：使用`Split`方法将字符串按逗号分割，并处理每个选中的值。
##### 3.2 前端获取选中值
前端获取选中复选框的值可以通过jQuery轻松实现：
```javascript
function check() {
var str = "缺少材料：";
$("input:checkbox[nName='Id']:checked").each(function() {
str += $(this).val() + ',';
});
str = str.substring(0, str.length - 1);
$("#txt_content").val(str);
}
```
- **获取选中复选框**：使用jQuery选择器选取所有带有`nName='Id'`属性且`checked`状态为真的复选框。
- **构建字符串**：遍历所有选中的复选框，并将其值拼接到字符串`str`中。
- **处理字符串**：去除最后一个多余的逗号，并将结果赋值给`#txt_content`元素。
#### 四、总结
本文详细介绍了如何利用HTML、JavaScript和C#实现复选框的“全选/全不选”功能及前后端交互获取选中复选框的值。这些技术点对于开发基于Web的应用程序来说是非常实用的。通过上述代码示例的学习，可以帮助开发者更好地理解和应用复选框相关的功能。
