How to add multiple checkbox selected item to another list box - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: checked listbox, javascript listbox, jQuery ListBox, jqxListBox, ListBox

This topic contains 6 replies, has 3 voices, and was last updated by yakirmanor 12 years ago.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

How to add multiple checkbox selected item to another list box Posts

July 2, 2012 at 9:48 am How to add multiple checkbox selected item to another list box #5549

mohan raj

Member

Hi,

PFB my Code :

$(‘#Lstlob’).bind(‘checkChange’, function(event) {
var args = event.args;
// var item = $(‘#Lstlob’).jqxListBox(‘getItem’, args.index);
var value = args.label;
var urlLOB = ‘@Url.Action(“PopulateFamilyList”)’;
if (args.checked) {

value = args.label;
} else {
value = ”;
}

$.ajax({
type: “POST”,
url: urlLOB,
data: { strPlatfrom: value },
success: function(returndata) {
// $(‘#LstFamParent’).jqxListBox(‘clear’);

$.each(returndata.data, function(index, objPlatfrms) {

// $(“#LstFamParent”).jqxListBox({ source: returndata, checkboxes: true, width: 200, height: 200, theme: theme });
$(“#LstFamParent”).jqxListBox(‘addItem’, objPlatfrms);
});

//
}
});

I want to add mutiple checkbox selected items into another checkbox. But with the above code i am able to add only a single checkbox selected item. Please let me know who to add multiple selected items ASAP.

Thanks,
raj

July 3, 2012 at 4:51 am How to add multiple checkbox selected item to another list box #5596

Peter Stoev

Keymaster

Hi raj,

Here’s a small sample which adds multiple items to the jqxListBox.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getTheme();
                var source = [
                    "Affogato",
                    "Americano",
                    "Bicerin",
                    "Breve",
                    "Café Bombón",
                    "Café au lait",
                    "Caffé Corretto",
                    "Café Crema",
                    "Caffé Latte",
                    "Caffé macchiato",
                    "Café mélange",
                    "Coffee milk",
                    "Cafe mocha",
                    "Cappuccino",
                    "Carajillo",
                    "Cortado",
                    "Cuban espresso",
                    "Espresso",
                    "Eiskaffee",
                    "The Flat White",
                    "Frappuccino"
		        ];
                // Create a jqxListBox
                $("#jqxWidget").jqxListBox({ checkboxes: true, selectedIndex: 3, source: source, width: 200, height: 250, theme: theme });
                var data2 = ["Galao",
                    "Greek frappé coffee",
                    "Iced Coffee",
                    "Indian filter coffee",
                    "Instant coffee",
                    "Irish coffee",
                    "Liqueur coffee"];
                $.each(data2, function () {
                    $("#jqxWidget").jqxListBox('addItem', { label: this });
                });
            });
        </script>
        <div id='jqxWidget'>
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 3, 2012 at 11:53 am How to add multiple checkbox selected item to another list box #5611

mohan raj

Member

Hi Peter,

I have 2 listboxes with checkbox. on selection of checkbox item in listbox1, the listbox2 has to be populated. On unselecting the checkbox item in listbox1, the item in listbox2 must be removed. I am able to do it for single item. I need it for multiple selection. removeAt() method accepts index. But in my case the index is dynamic. I want to items in Listbox to be removed based on label or value. Please provide some information.

Thanks in advance!!!

July 4, 2012 at 6:40 am How to add multiple checkbox selected item to another list box #5638

Peter Stoev

Keymaster

Hi mohan raj,

To find an item’s index by label or value, take a look at the code snippet below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getTheme();
                var source = [
                    "Affogato",
                    "Americano",
                    "Bicerin",
                    "Breve",
                    "Café Bombón",
                    "Café au lait",
                    "Caffé Corretto",
                    "Café Crema",
                    "Caffé Latte",
                    "Caffé macchiato",
                    "Café mélange",
                    "Coffee milk",
                    "Cafe mocha",
                    "Cappuccino",
                    "Carajillo",
                    "Cortado",
                    "Cuban espresso",
                    "Espresso",
                    "Eiskaffee",
                    "The Flat White",
                    "Frappuccino",
                    "Galao",
                    "Greek frappé coffee",
                    "Iced Coffee",
                    "Indian filter coffee",
                    "Instant coffee",
                    "Irish coffee",
                    "Liqueur coffee"
		        ];
                // Create a jqxListBox
                $("#jqxWidget").jqxListBox({ selectedIndex: 3, source: source, width: 200, height: 250, theme: theme });
                var items = $("#jqxWidget").jqxListBox('getItems');
                var indexToRemove = -1;
                $.each(items, function (index) {
                    if (this.label == "Cappuccino") {
                        indexToRemove = index;
                        return false;
                    }
                });
            });
        </script>
        <div id='jqxWidget'>
        </div>
    </div>
</body>
</html>

Hope this helps you.

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 6, 2012 at 8:21 am How to add multiple checkbox selected item to another list box #5720

mohan raj

Member

Hi Peter,

Thanks a lot!!!!!!!!!!!!!!!!

regards,
mohanraj

August 28, 2012 at 11:21 pm How to add multiple checkbox selected item to another list box #7221

yakirmanor

Member

by any chance there is a combination of the ListBox type ‘Custom Rendering’
in this page:

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxlistbox/rendering.htm?classic

and the ListBox type ‘Checkboxes’
in this page:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxlistbox/checkboxes.htm?classic

meaning on the left of each employee there will be a checkbox similar to the on in the ListBox type ‘Checkboxes’ example and the employee name or id will be returned ?
could be a great deal of help.

ps – i mean to have the ListBox type ‘Checkboxes’ example with an addition of a small pic between the checkbox itself and the name on the right of it is what im trying to create.
like so:
_
| | img name
–
here is a picture of what im trying to create:
http://www.flickr.com/photos/74908757@N02/7883703918/

August 29, 2012 at 9:19 am How to add multiple checkbox selected item to another list box #7244

yakirmanor

Member

never mind, you can see mine here:
http://jsfiddle.net/yakirmanor/UDJaX/embedded/result/

Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.