3-6 C#空间基础 CheckBox & foreach 循环

这篇博客介绍了如何在C#中使用foreach循环遍历CheckBox控件,展示了一个实例,通过遍历div_chks层中的控件,检查CheckBox是否被选中,并将选中的文本添加到TextBox中。

CheckBox:复选框

例程:





Foreach遍历循环:常用语对控件的遍历;

for:由于数组长度可测,因此常用for对数组进行遍历循环;



代码:

.aspx代码:

<div>
        <div id="div_chks" runat="server">
        <asp:CheckBox ID="CheckBox2" runat="server" Text="逛街" Width="100px"/>
        <asp:CheckBox ID="CheckBox3" runat="server" Text="喝茶" Width="100px"/>
        <asp:CheckBox ID="CheckBox4" runat="server" Text="唱歌" Width="100px"/>
        <asp:CheckBox ID="CheckBox5" runat="server" Text="购物" Width="100px"/>
        <asp:CheckBox ID="CheckBox6" runat="server" Text="看电影" Width="100px"/>
        <asp:CheckBox ID="CheckBox7" runat="server" Text="看书" Width="100px"/>
        <asp:CheckBox ID="CheckBox8" runat="server" Text="旅游" Width="100px"/>
        <asp:CheckBox ID="CheckBox9" runat="server" Text="听音乐" Width="100px"/>
        <asp:CheckBox ID="CheckBox10" runat="server" Text="爬山" Width="100px"/>
        <asp:CheckBox ID="CheckBox11" runat="server" Text="玩游戏" Width="100px"/>
        <asp:CheckBox ID="CheckBox12" runat="server" Text="看综艺节目" Width="100px"/>
        <asp:CheckBox ID="CheckBox13" runat="server" Text="学ASP.NET" Width="100px"/>
        <br/>
            <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
            <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Rows="4"></asp:TextBox>
        </div>

    </div>


控件代码(.cs代码):

 protected void Button1_Click(object sender, EventArgs e)
 {
        TextBox1.Text = "";
        CheckBox _chk;


        foreach(Control ctl in div_chks.Controls)        //Control是控件类型, div_chks是层,div_chks.Controls是层中的控件
        {
            if(ctl is CheckBox)
            {
                _chk = (CheckBox)ctl;
                if(_chk.Checked)        //用于检测复选框是否被选中,只有被选中时,才执行下列代码
                        TextBox1.Text += _chk.Text + ",";
            }
        }
 }



### 使用 `el-checkbox-group` 和 `v-for` 循环渲染复框 为了在 Element UI 中使用 `el-checkbox-group` 组件并利用 Vue.js 的 `v-for` 指令来循环渲染个复框,可以按照如下方法操作: #### HTML 结构与绑定数据模型 创建一个 `<el-checkbox-group>` 容器,并为其设置 `v-model` 属性用于双向绑定所中的项数组。接着,在该容器内使用带有 `v-for` 指令的 `<el-checkbox>` 来遍历项列表。 ```html <template> <div class="email-checkbox"> <el-checkbox-group v-model="selectedOptions"> <el-checkbox :label="option.value" v-for="(option, index) in options" :key="index">{{ option.label }}</el-checkbox> </el-checkbox-group> </div> </template> <script> export default { data() { return { selectedOptions: [], // 存储已择的值 options: [ { value: &#39;Option1&#39;, label: &#39;项一&#39; }, { value: &#39;Option2&#39;, label: &#39;项二&#39; }, { value: &#39;Option3&#39;, label: &#39;项三&#39; } ] }; } }; </script> ``` 上述代码展示了如何定义一组可供择的项目以及初始化状态变量 `selectedOptions` 来保存用户的输入[^1]。 #### 设置样式调整布局 对于 `.email-checkbox` 类下的 `.el-checkbox` 元素应用特定宽度和间距,以便更好地控制页面上的显示效果。这有助于确保当有大量复框时它们能够整齐排列而不至于显得杂乱无章。 ```css .email-checkbox { padding: 20px 0 0 20px; text-align: left; .el-checkbox { width: 33.33%; margin: 10px 0 10px; } } ``` 此 CSS 片段来自给定的例子,它使得每个复框占据父级容器三分之一的空间,并设置了上下边距以增加视觉间隔。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值