获取HTML'checkbox' 的值/Split

本文展示了一个使用ASP.NET从数据库中删除特定记录的示例代码。通过复选框选择要删除的项,并利用C#及SQL语句完成删除操作。涉及到数据库连接、SQL命令执行等关键技术。

<ItemTemplate>
      <input  type='checkbox' name='checked' value='<%# DataBinder.Eval(Container.DataItem, "dj_id")%>'>                                               
</ItemTemplate>      

 

if (Request["checked"] != null)
        {           
            string TempStr = Request["checked"].ToString();
            string[] Strs = TempStr.Split(',');
            foreach (string Str in Strs)
            {
                //Response.Write(Str);
                SqlConnection connection = new SqlConnection(System.Configuration.ConfigurationSettings.AppSettings["connstring"].ToString());
                connection.Open();
                string sql = "delete from tb_myfile where dj_id='" + Str + "'";
                SqlCommand cmd = new SqlCommand(sql, connection);
                cmd.ExecuteNonQuery();
                connection.Close();
            }
            Response.Redirect("mymusicbox.aspx");
        }

在表单提交后回显 `checkbox` 的选中,通常需要从后端获取已保存的数据,然后通过前端脚本(如 JavaScript 或 jQuery)将对应的 `checkbox` 设置为选中状态。以下是一个通用的实现方法。 ### 回显逻辑 1. 从后端获取已保存的 `checkbox` (通常是一个字符串或数组)。 2. 将获取到的进行拆分处理,得到一个数组。 3. 遍历页面上的所有 `checkbox`,将匹配到的对应的 `checkbox` 设置为选中状态。 ### 示例代码 假设后端返回的数据为 `h = "1,2,3"`,表示选中了为 `1`、`2` 和 `3` 的 `checkbox`。 #### HTML 示例 ```html <input type="checkbox" name="options" value="1"> 选项1 <input type="checkbox" name="options" value="2"> 选项2 <input type="checkbox" name="options" value="3"> 选项3 <input type="checkbox" name="options" value="4"> 选项4 ``` #### JavaScript 示例 ```javascript // 模拟从后端获取 var h = "1,2,3"; // 拆分字符串为数组 var checkArray = h.split(","); // 获取所有的 checkbox var checkBoxAll = $("input[name='options']"); // 遍历数组,设置对应的 checkbox 为选中状态 checkArray.forEach(function(value) { checkBoxAll.each(function() { if ($(this).val() === value) { $(this).prop("checked", true); } }); }); ``` ### 使用 Layui 的示例 如果使用的是 Layui 框架,需要在设置完 `checkbox` 状态后调用 `form.render()` 来更新表单。 #### HTML 示例(Layui) ```html <input type="checkbox" name="options" value="1" lay-skin="switch" lay-text="ON|OFF"> <input type="checkbox" name="options" value="2" lay-skin="switch" lay-text="ON|OFF"> <input type="checkbox" name="options" value="3" lay-skin="switch" lay-text="ON|OFF"> ``` #### JavaScript 示例(Layui) ```javascript var h = "1,2,3"; var checkArray = h.split(","); var checkBoxAll = $("input[name='options']"); checkArray.forEach(function(value) { checkBoxAll.each(function() { if ($(this).val() === value) { $(this).prop("checked", true); } }); }); layui.use('form', function() { var form = layui.form; form.render(); // 更新表单 }); ``` ### React + Ant Design 示例 在 React 中,可以使用 `useState` 来管理选中状态,并在组件加载时设置初始。 #### React 示例 ```jsx import React, { useState, useEffect } from 'react'; import { Checkbox } from 'antd'; const CheckboxGroup = Checkbox.Group; const options = [ { label: '选项1', value: '1' }, { label: '选项2', value: '2' }, { label: '选项3', value: '3' }, { label: '选项4', value: '4' }, ]; const MyCheckboxGroup = () => { const [checkedValues, setCheckedValues] = useState([]); useEffect(() => { // 模拟从后端获取 const h = '1,2,3'; setCheckedValues(h.split(',')); }, []); const onChange = (checkedValues) => { setCheckedValues(checkedValues); }; return ( <CheckboxGroup options={options} value={checkedValues} onChange={onChange} /> ); }; export default MyCheckboxGroup; ``` ### 总结 - 在表单提交后回显 `checkbox` 的选中,需要从后端获取数据,并通过前端脚本设置对应的 `checkbox` 为选中状态。 - 对于不同的前端框架(如 Layui、React + Ant Design),需要使用框架提供的方法来更新表单状态。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值