Checkbox list

0

Sign in to vote

User991499041 posted

Hi Magesh.L,

Hi,

I want to move selected item from one Checkboxlist to another Checkboxlist using Javascript.

Kindly guide me

You can try below code.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
    <ul id="select1">
        <li>
            <label>
                <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_0" />Checkbox 1
            </label>
        </li>
        <li>
            <label>
                <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_1" />Checkbox 2
            </label>
        </li>
        <li>
            <label>
                <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_2" />Checkbox 3
            </label>
        </li>
    </ul>

    <ul id="select2">
        <li>
            <label>
                <input type="checkbox" name="CheckboxGroup2" value="checkbox" id="CheckboxGroup2_0" />Checkbox 4
            </label>
        </li>
        <li>
            <label>
                <input type="checkbox" name="CheckboxGroup2" value="checkbox" id="CheckboxGroup2_1" />Checkbox 5
            </label>
        </li>
        <li>
            <label>
                <input type="checkbox" name="CheckboxGroup2" value="checkbox" id="CheckboxGroup2_2" />Checkbox 6
            </label>
        </li>
    </ul>

    <a href="#" id="add">add</a>
    <a href="#" id="remove">remove</a>
</body>
</html>
<script>
    $('#add').click(function () {
        return !$('#select1 li :checked').closest('li').appendTo('#select2');
    });
    $('#remove').click(function () {
        return !$('#select2 li :checked').closest('li').appendTo('#select1');
    });
</script>

Regards,

zxj

Friday, December 1, 2017 5:48 AM

0

Sign in to vote

User-1216534573 posted

Hi

Thanks for your answer but give me the solution for ASP.net checkboxlist.

From one selected item of Asp.Net Checkboxlist to another Asp.net Checkboxlist

Friday, December 1, 2017 5:55 AM

0

Sign in to vote

User-335504541 posted

Hi Magesh.L,

Please try to use the following code:

<form id="form1" runat="server">
        <div>
            CheckBoxList1
            <asp:CheckBoxList ID="CheckBoxList1" runat="server">                
                <asp:ListItem Text="box1"></asp:ListItem>
                <asp:ListItem Text="box2"></asp:ListItem>
                <asp:ListItem Text="box3"></asp:ListItem>
            </asp:CheckBoxList>
            CheckBoxList2
            <asp:CheckBoxList ID="CheckBoxList2" runat="server">
                <asp:ListItem Text="box4"></asp:ListItem>
                <asp:ListItem Text="box5"></asp:ListItem>
                <asp:ListItem Text="box6"></asp:ListItem>
            </asp:CheckBoxList>
            <input id="Button1" type="button" value="button" onclick="move()" />
            <script>
                function move() {
                    var CheckBoxList1 = $('#<%= CheckBoxList1.ClientID %>');
                    var CheckBox1 = $('#<%= CheckBoxList1.ClientID %>').find("input");
                    console.log(CheckBox1);
                    var CheckBoxList2 = $('#<%= CheckBoxList2.ClientID %>');
                    var CheckBox2 = $('#<%= CheckBoxList2.ClientID %>').find("input");                 
                    CheckBox1.each(function (index, checkbox) {
                        if ($(checkbox)[0].checked) {
                            var tr = $(checkbox).closest('tr').appendTo(CheckBoxList2);
                        }
                    }) 
                }
            </script>
        </div>
    </form>

And the result is:

Best Regards,

Billy

Friday, December 1, 2017 6:41 AM

0

Sign in to vote

User991499041 posted

Hi Magesh.L,

Magesh.L

Hi

Thanks for your answer but give me the solution for ASP.net checkboxlist.

From one selected item of Asp.Net Checkboxlist to another Asp.net Checkboxlist

You can do like this

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm7.aspx.cs" Inherits="WebFormDemo.WebForm7" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="select1">
            <asp:CheckBoxList ID="CheckBoxList1" runat="server">
                <asp:ListItem>Checkbox 1</asp:ListItem>
                <asp:ListItem>Checkbox 2</asp:ListItem>
                <asp:ListItem>Checkbox 3</asp:ListItem>
            </asp:CheckBoxList>
        </div>
        <hr />
        <div id="select2">
            <asp:CheckBoxList ID="CheckBoxList2" runat="server">
                <asp:ListItem>Checkbox 4</asp:ListItem>
                <asp:ListItem>Checkbox 5</asp:ListItem>
                <asp:ListItem>Checkbox 6</asp:ListItem>
            </asp:CheckBoxList>
        </div>

        <a href="#" id="add">CheckBoxList1 -> CheckBoxList2</a>
        <br />
        <a href="#" id="remove">CheckBoxList2 -> CheckBoxList1</a>

    </form>
</body>
</html>
<script>
    $('#add').click(function () {
        return !$('#select1  :checked').closest('tr').appendTo('#select2');
    });
    $('#remove').click(function () {
        return !$('#select2  :checked').closest('tr').appendTo('#select1');
    });
</script>

Regards,

zxj

Friday, December 1, 2017 6:42 AM

0

Sign in to vote

User-1216534573 posted

Hi Billy,

It is not working am using update panel will it be reason for this?

Friday, December 1, 2017 9:35 AM

0

Sign in to vote

User-335504541 posted

Hi Magesh.L,

It is not working <g class="gr_ gr_17 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace" id="17" data-gr-id="17">am</g> using update panel will it be <g class="gr_ gr_16 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins doubleReplace replaceWithoutSep" id="16" data-gr-id="16">reason</g> for this?

No, I have tested it with <g class="gr_ gr_14 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="14" data-gr-id="14">updatepanel</g> and it works. You could check the console in your developer tool(F12) in browser whether there is <g class="gr_ gr_15 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del" id="15" data-gr-id="15">any</g> error message.

Or could you show me your code?

Here is my test code:

    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    CheckBoxList1
                    <asp:CheckBoxList ID="CheckBoxList1" runat="server">
                        <asp:ListItem Text="box1"></asp:ListItem>
                        <asp:ListItem Text="box2"></asp:ListItem>
                        <asp:ListItem Text="box3"></asp:ListItem>
                    </asp:CheckBoxList>
                    CheckBoxList2
                    <asp:CheckBoxList ID="CheckBoxList2" runat="server">
                        <asp:ListItem Text="box4"></asp:ListItem>
                        <asp:ListItem Text="box5"></asp:ListItem>
                        <asp:ListItem Text="box6"></asp:ListItem>
                    </asp:CheckBoxList>
                    <input id="Button1" type="button" value="button" onclick="move()" />
                </ContentTemplate>
            </asp:UpdatePanel>

            <script>
                function move() {
                    var CheckBoxList1 = $('#<%= CheckBoxList1.ClientID %>');
                    var CheckBox1 = $('#<%= CheckBoxList1.ClientID %>').find("input");
                    console.log(CheckBox1);
                    var CheckBoxList2 = $('#<%= CheckBoxList2.ClientID %>');
                    var CheckBox2 = $('#<%= CheckBoxList2.ClientID %>').find("input");
                    CheckBox1.each(function (index, checkbox) {
                        if ($(checkbox)[0].checked) {
                            var tr = $(checkbox).closest('tr').appendTo(CheckBoxList2);
                        }
                    })
                }
            </script>
        </div>
    </form>

Best Regards,

Billy

Monday, December 4, 2017 2:04 AM

Asked by:

Checkbox list

Question

All replies

Magesh.L