如何使用 jquery 将复选框列表项的值复制到列表框答案

【问题标题】：how to copy checkboxlist item's value to listbox using jquery如何使用 jquery 将复选框列表项的值复制到列表框
【发布时间】：2011-09-19 06:48:17
【问题描述】：

我的页面中有一个复选框列表，其中包含某些语言的项目文本（例如：c、c++、java、c#sharp.net 等）。我有一个名为所需技能的空列表框。人力资源招聘人员将选择一些语言（复选框列表的项目）并单击一个名为“渴望”的按钮来复制选定的复选框，并且需要将其填充到列表框中。我想知道如何使用 jquery 来实现这一点。这是我的控件：

<asp:CheckBoxList ID="cbxlang" runat="server">
                    <asp:ListItem Text="C" Value="C"></asp:ListItem>
                    <asp:ListItem Text="C++" Value="C++"></asp:ListItem>
                    <asp:ListItem Text="Java" Value="Java"></asp:ListItem>
                    <asp:ListItem Text="csharp" Value="csharp"></asp:ListItem>
                </asp:CheckBoxList>

这里是按钮：

<asp:Button ID="btnCheck" runat="server" Text="DesiredSkills" />

列表框是这样的

 <asp:ListBox ID="lstDesired" runat="server"></asp:ListBox>

我想将选中的复选框项填充为我的列表框项。我已经在页面后面的代码中完成了此操作，但是需要将页面发回然后再次加载。请帮忙。我对 jquery 很陌生。

【问题讨论】：

标签： jquery asp.net

【解决方案1】：

试试这个，

    <script type="text/javascript">
            $(document).ready(function () {
                $("#button1").click(function () {
                    txt = $("#cbxlang").find("input");

                    $("#lstDesired").children().remove();
                    txt.each(function (a, b) {
                        if (b.checked)
                            $("#lstDesired").append("<option>" + b.value + "</option>");
                    });

                });
            });
 </script>

标记

<asp:CheckBoxList ID="cbxlang" runat="server">
            <asp:ListItem Text="C" Value="C"></asp:ListItem>
            <asp:ListItem Text="C++" Value="C++"></asp:ListItem>
            <asp:ListItem Text="Java" Value="Java"></asp:ListItem>
            <asp:ListItem Text="csharp" Value="csharp"></asp:ListItem>
  </asp:CheckBoxList>
  <asp:ListBox ID="lstDesired" runat="server"></asp:ListBox>
  <input type="button" id="button1" value="Copy" />

【讨论】：

感谢您的回复。我已经应用了您的代码，但是在列表框中，我将“打开”作为项目文本。如果我选择 3 个复选框，它会填充 3 个“on”项目。列表框项目也不稳定，它会显示项目一秒钟然后清空它。
@NayeemKhan - 不要使用 ASP.NET 提交按钮。请改用 HTML 按钮。
我把 onclick = return false，所以它现在稳定了。但我仍然将文本框中的项目作为“on”而不是复选框项目的值
您在说哪个文本框？你可以试试这个 - ""
抱歉，我输入的是文本框而不是列表框

【解决方案2】：

默认情况下，CheckBoxList 控件不会产生任何注释的值属性。

用 CheckBoxValueList 自定义控件替换您的 CheckBoxList：

using System;
using System.ComponentModel;
using System.IO;
using System.Text;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace YourSite.WebControls
{
    /// <summary>
    /// Adds the 'value' attribute to the <input /> element of each checkbox in the list
    /// </summary>
    [DefaultProperty("Text"),
    ToolboxData("<{0}:CheckBoxValueList runat=server></{0}:CheckBoxValueList>")]
    public class CheckBoxValueList : CheckBoxList
    {
        protected override void Render(HtmlTextWriter writer)
        {
            StringBuilder sb = new StringBuilder();
            TextWriter tw = new StringWriter(sb);

            HtmlTextWriter originalStream = new HtmlTextWriter(tw);
            base.Render(originalStream);
            string renderedText = sb.ToString();

            int start = 0;
            int labelStart = 0;
            int end = renderedText.Length;

            for (int i = 0; i < this.Items.Count; i++)
            {
                StringBuilder itemAttributeBuilder = new StringBuilder();

                end = renderedText.Length;
                start = renderedText.IndexOf("<input", start, end - start);
                labelStart = renderedText.IndexOf("<label", start, end - start);

                this.Items[i].Attributes.Render(new HtmlTextWriter(new StringWriter(itemAttributeBuilder)));

                renderedText = renderedText.Insert(labelStart + 7, itemAttributeBuilder.ToString() + " ");
                renderedText = renderedText.Insert(start + 7, String.Format("{0} value=\"{1}\" ", itemAttributeBuilder.ToString(), this.Items[i].Value));
                start = renderedText.IndexOf("/>", start, renderedText.Length - start);
            }

            writer.Write(renderedText);
        }
    }
}

查看这里了解更多信息...

http://surinder.computing-studio.com/post/2011/08/10/ASPNET-CheckBoxList-Control-With-Value-Attribute.aspx

然后您可以使用 AVD 的 jQuery 来完成这项工作。

【讨论】：