checkboxlist的布局问题

最新推荐文章于 2018-12-05 13:52:05 发布

清空回声

最新推荐文章于 2018-12-05 13:52:05 发布

阅读量3.3k

点赞数

分类专栏： checkboxlist 文章标签： checkboxlist

checkboxlist 专栏收录该内容

0 篇文章

订阅专栏

本文介绍如何使用CSS为ASP.NET中的CheckBoxList控件设置样式，并通过JavaScript获取已选择的值。具体包括如何定义列数、布局方向及内边距等属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css样式：
<style type="text/css">
#cbxListParent input {vertical-align:middle;float:left;}
#cbxListQuestionType input{vertical-align:middle;}
.cb td{width:100px;}
.cb label{display:inline-block;width:80px;}
</style>

<asp:CheckBoxList ID="cbxListQuestionType"
runat="server"
CssClass="cb" //这里是css
RepeatLayout="Table" //排列方式（table，ol之类）
RepeatColumns="4" //每行几列（4列）
RepeatDirection="Horizontal" //布局方式（纵向【默认】、横向）这里是横向

CellPadding="5" CellSpacing="5" Width="400"></asp:CheckBoxList>

<asp:CheckBoxList ID="DDLGroups" runat="server" RepeatLayout="Table" RepeatColumns="2" RepeatDirection="Horizontal" style="border-collapse:collapse; line-height:18px;margin-left:2px;">
</asp:CheckBoxList>

[css]
<style type="text/css">
#DDLGroups{border-collapse:collapse; line-height:18px}
#DDLGroups td{width:300px; border:1px solid #F0F8FF;padding-left:5px}

</style>

获取所选值：

[javascript]
//获取联系人组
$("#DDLGroups tbody tr td input:checkbox:checked").each(function () {
alert($(this).parent().find("label").html())
});