how to copy checkboxlist item's value to listbox using jquery

I have a checkboxlist in my page having item text as some languages (ex: c, c++, java, c#sharp.net etc.). I have an empty listbox called desired skills. HR recruiter will select some of the languages (items of checkboxlist) and click a button called 开发者_运维技巧desire to copy the selected ckeckboxes and that need to be populated in list box. I wanted to know that how can i achieve this using jquery. here are my controls :

<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>

here the button :

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

and the listbox is like this

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

I want to populate the selected checkbox items as my listbox items. I have done this in code behind page, but that need page to be sent back and then load it again. Please help. I am very new to jquery.

Try this,

    <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>

Markup

<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" />

By default the CheckBoxList control doesn't produce a value attribute of any note.

Replace your CheckBoxList with a CheckBoxValueList custom control:

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);
        }
    }
}

See here for more information...

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

You can then use AVD's jQuery to finish the job.