Question

我在页面上有这个CheckBoxList：

<asp:checkboxlist runat="server" id="Locations" datasourceid="LocationsDatasource"
   datatextfield="CountryName" datavaluefield="CountryCode" />

我想使用Javascript遍历客户端上的复选框元素并获取每个选中复选框的值，但这些值似乎在客户端不可用。 HTML输出如下所示：

<table id="ctl00_Content_Locations" class="SearchFilterCheckboxlist" cellspacing="0" cellpadding="0" border="0" style="width:235px;border-collapse:collapse;">
<tr>
    <td><input id="ctl00_Content_Locations_0" type="checkbox" name="ctl00$Content$Locations$0" /><label for="ctl00_Content_Locations_0">Democratic Republic of the Congo</label></td>
</tr><tr>
    <td><input id="ctl00_Content_Locations_1" type="checkbox" name="ctl00$Content$Locations$1" /><label for="ctl00_Content_Locations_1">Central African Republic</label></td>
</tr><tr>
    <td><input id="ctl00_Content_Locations_2" type="checkbox" name="ctl00$Content$Locations$2" /><label for="ctl00_Content_Locations_2">Congo</label></td>
</tr><tr>
    <td><input id="ctl00_Content_Locations_3" type="checkbox" name="ctl00$Content$Locations$3" /><label for="ctl00_Content_Locations_3">Cameroon</label></td>
</tr><tr>
    <td><input id="ctl00_Content_Locations_4" type="checkbox" name="ctl00$Content$Locations$4" /><label for="ctl00_Content_Locations_4">Gabon</label></td>
</tr><tr>
    <td><input id="ctl00_Content_Locations_5" type="checkbox" name="ctl00$Content$Locations$5" /><label for="ctl00_Content_Locations_5">Equatorial Guinea</label></td>
</tr>

无法找到值（“cd”，“cg”，“ga”等）。他们在哪？甚至可以在客户端访问它们，还是我需要使用转发器或其他东西自己构建这个复选框？

Answer 1

我终于得到了我一直在寻找的答案！

asp.net CheckboxList控件确实实际上将value属性呈现为HTML - 它已经在我的生产网站上工作了一年多了！（我们总是关闭所有网站的EnableViewState，它仍然有效，没有任何调整或黑客攻击）

然而，突然间，它停止工作一天，我们的CheckboxList复选框不再在HTML中呈现它们的value属性！ WTF你说？我们也是！这需要一段时间来解决这个问题，但由于它以前一直在工作，我们知道必须有一个理由。原因是我们的web.config意外更改了！

<pages controlRenderingCompatibilityVersion="3.5">

我们从页面配置部分删除了这个属性，这就是诀窍！

为什么会这样？我们反映了CheckboxList控件的代码，并在RenderItem方法中找到了它：

if (this.RenderingCompatibility >= VersionUtil.Framework40)
{
    this._controlToRepeat.InputAttributes.Add("value", item.Value);
}

最亲爱的开发兄弟姐妹不要绝望！我在Stackexchange上搜索到的所有答案以及网络的其他部分都给出了错误的信息！从.Net 4.0开始，asp.net呈现CheckboxList复选框的value属性：

<input type="checkbox" value="myvalue1" id="someid" />

也许没有实际用处，微软让你能够在你的web.config中添加一个“controlRenderingCompatibilityVersion”，通过设置低于4的版本来关闭它，这对我们来说是完全没必要的，实际上是有害的，因为javascript代码依赖于value属性......

对于我们所有的复选框，我们得到chk.val（）等于“on”，这是最初提醒我们这个问题的原因（使用获取复选框值的jquery.val（）。 out“on”是选中的复选框的值...每天学习一些东西。

Answer 2

<body>
     <form id="form1" runat="server">
          <div>
               <asp:CheckBoxList ID="CheckBoxList1" runat="server" DataTextField="tx" DataValueField="vl">
               </asp:CheckBoxList>
          </div>
          <input id="Button1" type="button" value="button" onclick="return Button1_onclick()" /> 
     </form>
</body>
<script type="text/javascript">

function Button1_onclick() 
{
var itemarr = document.getElementById("CheckBoxList1").getElementsByTagName("span");
var itemlen = itemarr.length;
     for(i = 0; i <itemlen;i++)
     {
          alert(itemarr[i].getAttribute("dvalue"));
     }
return false;
}


</script>

代码

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("tx");
        dt.Columns.Add("vl");
        DataRow dr = dt.NewRow();
        dr[0] = "asdas";
        dr[1] = "1";
        dt.Rows.Add(dr);
        dr = dt.NewRow();
        dr[0] = "456456";
        dr[1] = "2";
        dt.Rows.Add(dr);
        dr = dt.NewRow();
        dr[0] = "yjryut";
        dr[1] = "3";
        dt.Rows.Add(dr);
        dr = dt.NewRow();
        dr[0] = "yjrfdgdfgyut";
        dr[1] = "3";
        dt.Rows.Add(dr);
        dr = dt.NewRow();
        dr[0] = "34534";
        dr[1] = "3";
        dt.Rows.Add(dr);
        CheckBoxList1.DataSource = dt;
        CheckBoxList1.DataBind();
        foreach (ListItem li in CheckBoxList1.Items)
        {
            li.Attributes.Add("dvalue", li.Value);
        }
    }
}

Answer 3

存储在ViewState中，如果没有some hacking，则无法在客户端上访问它们。

Answer 4

为避免黑客入侵复选框列表，只需使用转发器：

<asp:Repeater ID="rptItems" runat="server" DataSourceID="odsDataSource">
<ItemTemplate>
<input id="iptCheckBox" type="checkbox" runat="server" value='<%# Eval("Key") %>'><%# Eval("Value") %></input>
</ItemTemplate>
</asp:Repeater>

Answer 5

为了让它发挥作用，必须做一些非常讨厌的事情。

        <asp:Repeater ID="rptItems" runat="server">
            <ItemTemplate>
                <input ID="iptCheckBox" type="checkbox" runat="server" value='<%# Eval("your_data_value") %>' />
                <label ID="iptLabel" runat="server"><%# Eval("your_data_field") %></label>
                <br />
            </ItemTemplate>
        </asp:Repeater>

代码隐藏：

Private Sub rptItems_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.RepeaterItemEventArgs) Handles rptItems.ItemDataBound
    Dim checkBox As HtmlInputCheckBox = DirectCast(e.Item.FindControl("iptCheckBox"), HtmlInputCheckBox)
    Dim label As HtmlControl = DirectCast(e.Item.FindControl("iptLabel"), HtmlControl)

    label.Attributes.Add("for", checkBox.ClientID)
End Sub

Answer 6

Swapna，你的答案绝对有效。因此，为了检查ASP.Net Checkboxlist中的复选框是否已选中，然后将列表累积为逗号分隔的字符串，您可以这样做

C＃代码隐藏

ChkboxList1.DataSource = dsData;
ChkboxList1.DataTextField = "your-display-column-name";
ChkboxList1.DataValueField = "your-identifier-column-name";
ChkboxList1.DataBind();

foreach (ListItem li in ChkboxList1.Items)
{
    li.Attributes.Add("DataValue", li.Value); 
}

然后在Javascript中

var selValues = "";
var ChkboxList1Ctl = document.getElementById("ChkboxList1");
var ChkboxList1Arr = null;
var ChkboxList1Attr= null;

if (ChkboxList1Ctl != null)
{
   ChkboxList1Arr = ChkboxList1Ctl.getElementsByTagName("INPUT");
   ChkboxList1Attr = ChkboxList1Ctl.getElementByTagName("span");
}
if (ChkboxList1Arr != null)
{
    for (var i = 0; i < ChkboxList1Arr.length; i++)
    {
       if (ChkboxList1Arr[i].checked)
           selValues += ChkboxList1Attr[i].getAttribute("DataValue") + ",";
    }
    if (selValues.length > 0)
       selValues = selValues.substr(0, selValues.length - 1);
}

Answer 7

删除<pages controlRenderingCompatibilityVersion="3.5">会导致我正在处理的一些旧代码出现问题。我得到了this error。一旦我收到了这个错误，我就意识到改变风险太大了。

要解决此问题，我最终扩展CheckBoxList并覆盖Render方法，以便为每个列表项添加包含该值的其他属性：

public class CheckBoxListExt : CheckBoxList
{
    protected override void Render(HtmlTextWriter writer)
    {
        foreach (ListItem item in this.Items)
        {
            item.Attributes.Add("data-value", item.Value);
        }

        base.Render(writer);
    }
}

这将在外部data-value标记上呈现span属性。

Answer 8

Easy Way I Do It.

//First create query directly From Database that contains hidden field code format (i do it in stored procedure)

SELECT Id,Name + '<input id="hf_Id" name="hf_Id" value="'+convert(nvarchar(100),Id)+'" type="hidden">' as Name FROM User

//Then bind checkbox list as normally(i bind it from dataview).

cbl.DataSource = dv;
cbl.DataTextField = "Name";
cbl.DataValueField = "Id";
cbl.DataBind();

//Then finally it represent code as follow.

<table id="cbl_Position" border="0">
<tbody>
<tr>
<td>
<input id="cbl_0" name="cbl$0" type="checkbox">
<label for="cbl_0">
ABC
<input id="hf_Id" name="hf_Id" value="1" type="hidden">
</label>
</td>
</tr>
</table>

This way you can get DataValueField as inside hiddenfield and also can get it value from client side using javascript.

Answer 9

我尝试了以下方法并为我工作：

<asp:CheckBoxList ID="chkAttachments" runat="server"></asp:CheckBoxList>

服务器端绑定：

private void LoadCheckBoxData()
        {

            var docList = new List<Documents>(); // need to get the list data from database
                    chkAttachments.Items.Clear();

                    ListItem item = new ListItem();
                  
                    foreach (var doc in docList )
                    {
                        item = new ListItem();
                        item.Value = doc.Id.ToString();
                        item.Text = doc.doc_name;
                        chkAttachments.Items.Add(item);
                    }
                }

Answer 10

我以前搜索过这个，你可能会有点运气。我想我记得看到没有javascript的复选框列表项，所以它不理解它。您必须在页面上搜索具有复选框类型的项目并进行测试，以查看它所属的组（我认为属性）。

我会搜索我的代码，看看能不能找到我做的...

当然，我找不到我的所作所为。

你为什么在javascript中做客户端？你为什么不做一些AJAX并控制服务器端的一切？

存储CheckBoxList的DataValueField值在哪里？

10 个答案: