Repeater实现RadioButton单选功能

### Repeater实现RadioButton单选功能 在Web开发中，经常需要实现一组单选按钮（`RadioButton`）的功能，使得用户只能选择一个选项。通常我们会在HTML表单中使用多个`RadioButton`并设置相同的`name`属性来实现这个功能。然而，在ASP.NET中，通过结合使用Repeater控件和JavaScript可以更灵活地实现这一需求。 #### Repeater控件简介 Repeater控件是ASP.NET中的一个非常强大的数据绑定控件，它允许开发者完全控制项模板的外观，因此非常适合需要高度自定义显示格式的情况。与GridView或DataList等其他数据绑定控件相比，Repeater提供了更多的灵活性，但它不提供内置分页、排序等功能，需要开发者自己实现这些功能。 #### 实现原理 本案例中，通过将一组`RadioButton`放入Repeater控件中，并利用JavaScript确保每次只能选择一个`RadioButton`，从而实现了单选功能。具体来说： 1. **JavaScript函数**：定义了一个名为`SetUniqueRadioButton`的JavaScript函数，该函数接收两个参数：`nameregex`用于匹配`RadioButton`的名字，`current`表示当前被点击的`RadioButton`对象。 2. **C#后端代码**：在Repeater控件的`ItemDataBound`事件处理程序中，为每个`RadioButton`添加一个`onclick`事件，当点击某个`RadioButton`时会触发`SetUniqueRadioButton`函数。 #### JavaScript函数详解 ```javascript function SetUniqueRadioButton(nameRegex, current) { var re = new RegExp(nameRegex); for (var i = 0; i < document.forms[0].elements.length; i++) { var elm = document.forms[0].elements[i]; if (elm.type === 'radio') { if (re.test(elm.name)) { elm.checked = false; } } } current.checked = true; } ``` - **参数说明**： - `nameRegex`：一个正则表达式，用来匹配`RadioButton`的名字。 - `current`：当前被点击的`RadioButton`对象。 - **实现逻辑**： - 遍历表单中的所有元素。 - 检查每个元素是否为`RadioButton`类型。 - 如果元素的名字匹配`nameRegex`，则将其选中状态设为`false`。 - 最后将`current`的选中状态设为`true`。 #### C#后端代码详解 ```csharp protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e) { if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) { RadioButton rdo = (RadioButton)e.Item.FindControl("RadioButton1"); string script = "SetUniqueRadioButton('psong.*RadioButton1', this)"; rdo.Attributes.Add("onclick", script); } } ``` - **事件处理程序**：`Repeater1_ItemDataBound`方法会在Repeater控件的每一项创建完成后被调用。 - **条件判断**：只对实际的数据项（`ItemType.Item`或`ItemType.AlternatingItem`）进行操作。 - **获取RadioButton**：通过`FindControl`方法找到`RadioButton`控件。 - **添加onclick属性**：为每个`RadioButton`添加一个`onclick`事件处理器，点击时执行`SetUniqueRadioButton`函数。 #### 总结 通过这种方式，不仅可以实现`RadioButton`的单选功能，还能够灵活地控制每个`RadioButton`的样式和布局。此外，这种方法也适用于动态生成的表单，为开发者提供了更大的自由度。