如何在ASP CheckBoxList的复选框中插入<p>标签？

没问题！当然可以实现这个需求——不过默认情况下，CheckBoxList会对ListItem的文本进行HTML编码，直接写<p>标签会被转义成<p>，所以得用点小技巧。我给你两种常用的解决方案：

方法一：后台自定义RepeatTemplate（完全控制HTML结构） #

这种方法能让你在后台完全控制每个列表项的渲染输出，适合需要稳定后台生成HTML的场景。你需要创建一个自定义的ITemplate实现，然后绑定到CheckBoxList的RepeatTemplate属性上：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // 为CheckBoxList设置自定义模板
        cbl.RepeatTemplate = new CustomCheckBoxItemTemplate();
        
        // 添加你的列表项
        cbl.Items.Add(new ListItem("第一个选项的标签文本", "value1"));
        cbl.Items.Add(new ListItem("第二个选项的标签文本", "value2"));
    }
}

// 自定义模板类，实现ITemplate接口
public class CustomCheckBoxItemTemplate : ITemplate
{
    public void InstantiateIn(Control container)
    {
        // 创建复选框控件
        CheckBox checkBox = new CheckBox();
        checkBox.ID = "itemCheckBox";
        
        // 绑定复选框的ID、值等属性
        checkBox.DataBinding += (s, e) =>
        {
            var currentCb = (CheckBox)s;
            var dataItem = (ListItem)((DataListItem)currentCb.NamingContainer).DataItem;
            var itemIndex = ((DataListItem)currentCb.NamingContainer).ItemIndex;
            
            currentCb.ID = $"cbl_{itemIndex}";
            currentCb.InputAttributes["value"] = dataItem.Value;
            currentCb.Attributes["name"] = $"M$content$PCDZ$M5TOPBM$ctl00$cbl$cbl_{itemIndex}";
        };
        container.Controls.Add(checkBox);

        // 创建包含<p>标签的label元素（用Literal避免HTML编码）
        Literal labelLiteral = new Literal();
        labelLiteral.DataBinding += (s, e) =>
        {
            var currentLit = (Literal)s;
            var dataItem = (ListItem)((DataListItem)currentLit.NamingContainer).DataItem;
            var itemIndex = ((DataListItem)currentLit.NamingContainer).ItemIndex;
            
            // 生成包含<p>标签的label代码
            currentLit.Text = $"<label for=\"cbl_{itemIndex}\"><p>{dataItem.Text}</p></label>";
        };
        container.Controls.Add(labelLiteral);
    }
}

这样渲染出来的HTML就会是你想要的结构：

<ul id="cbl">
    <li>
        <input id="cbl_0" type="checkbox" name="M$content$PCDZ$M5TOPBM$ctl00$cbl$cbl_0" value="value1">
        <label for="cbl_0"><p>第一个选项的标签文本</p></label>
    </li>
    <li>
        <input id="cbl_1" type="checkbox" name="M$content$PCDZ$M5TOPBM$ctl00$cbl$cbl_1" value="value2">
        <label for="cbl_1"><p>第二个选项的标签文本</p></label>
    </li>
</ul>

方法二：前端jQuery动态修改（快速实现） #

如果不想修改后台代码，用前端JS快速实现也是个不错的选择。只需要在页面加载完成后，遍历所有label标签，把它们的文本包裹进<p>标签里：

$(document).ready(function() {
    // 遍历CheckBoxList下的所有label
    $('#cbl label').each(function() {
        var originalText = $(this).text();
        // 替换成包含<p>的HTML
        $(this).html('<p>' + originalText + '</p>');
    });
});

这种方法的优点是简单快捷，不需要改动后台逻辑；缺点是如果页面有回发操作，需要在回发后重新执行这段代码（可以放在Sys.WebForms.PageRequestManager.getInstance().add_endRequest()里处理AJAX回发的情况）。

内容的提问来源于stack exchange，提问作者R. Devon North