jqwidgets-framework

<!DOCTYPE html> <html> <head> <title id='Description'>In this sample is demonstrated how to get the values of the checked items. For example: US for United States, UK for United Kingdom.</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.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/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <style type="text/css"> .demo-iframe { border: none; width: 600px; height: 400px; clear: both; } </style> </head> <body style='overflow: hidden;'> <script type="text/javascript"> $(document).ready(function () { $('#sendButton').jqxButton({ width: 70}); var countries = [ { value:"AF", label:"Afghanistan"}, { value:"AL", label:"Albania"}, { value:"DZ", label:"Algeria"}, { value:"AS", label:"American Samoa"}, { value:"AD", label:"Andorra"}, { value:"AO", label:"Angola"}, { value:"AI", label:"Anguilla"}, { value:"AQ", label:"Antarctica"}, { value:"AG", label:"Antigua and Barbuda"}, { value:"AR", label:"Argentina"}, { value:"AM", label:"Armenia"}, { value:"AW", label:"Aruba"}, { value:"AU", label:"Australia"}, { value:"AT", label:"Austria"}, { value:"AZ", label:"Azerbaijan"}, { value:"BS", label:"Bahamas"}, { value:"BH", label:"Bahrain"}, { value:"BD", label:"Bangladesh"}, { value:"BB", label:"Barbados"}, { value:"BY", label:"Belarus"}, { value:"BE", label:"Belgium"}, { value:"BZ", label:"Belize"}, { value:"BJ", label:"Benin"}, { value:"BM", label:"Bermuda"}, { value:"BT", label:"Bhutan"}, { value:"BO", label:"Bolivia"}, { value:"BA", label:"Bosnia and Herzegovina"}, { value:"BW", label:"Botswana"}, { value:"BV", label:"Bouvet Island"}, { value:"BR", label:"Brazil"}, { value:"BN", label:"Brunei"}, { value:"BG", label:"Bulgaria"}, { value:"BF", label:"Burkina Faso"}, { value:"BI", label:"Burundi"}, { value:"KH", label:"Cambodia"}, { value:"CM", label:"Cameroon"}, { value:"CA", label:"Canada"}, { value:"CV", label:"Cape Verde"}, { value:"KY", label:"Cayman Islands"}, { value:"CF", label:"Central African Republic"}, { value:"TD", label:"Chad"}, { value:"CL", label:"Chile"}, { value:"CN", label:"China"}, { value:"CX", label:"Christmas Island"}, { value:"CC", label:"Cocos (Keeling) Islands"}, { value:"CO", label:"Columbia"}, { value:"KM", label:"Comoros"}, { value:"CG", label:"Congo"}, { value:"CK", label:"Cook Islands"}, { value:"CR", label:"Costa Rica"}, { value:"CI", label:"Cote D'Ivorie"}, { value:"HR", label:"Croatia (Hrvatska)"}, { value:"CU", label:"Cuba"}, { value:"CY", label:"Cyprus"}, { value:"CZ", label:"Czech Republic"}, { value:"DK", label:"Denmark"}, { value:"DJ", label:"Djibouti"}, { value:"DM", label:"Dominica"}, { value:"DO", label:"Dominican Republic"}, { value:"TP", label:"East Timor"}, { value:"EC", label:"Ecuador"}, { value:"EG", label:"Egypt"}, { value:"SV", label:"El Salvador"}, { value:"GQ", label:"Equatorial Guinea"}, { value:"ER", label:"Eritrea"}, { value:"EE", label:"Estonia"}, { value:"ET", label:"Ethiopia"}, { value:"FO", label:"Faroe Islands"}, { value:"FJ", label:"Fiji"}, { value:"FI", label:"Finland"}, { value:"FR", label:"France"}, { value:"GF", label:"French Guinea"}, { value:"PF", label:"French Polynesia"}, { value:"GA", label:"Gabon"}, { value:"GM", label:"Gambia"}, { value:"GE", label:"Georgia"}, { value:"DE", label:"Germany"}, { value:"GH", label:"Ghana"}, { value:"GI", label:"Gibraltar"}, { value:"GR", label:"Greece"}, { value:"GL", label:"Greenland"}, { value:"GD", label:"Grenada"}, { value:"GP", label:"Guadeloupe"}, { value:"GU", label:"Guam"}, { value:"GT", label:"Guatemala"}, { value:"GN", label:"Guinea"}, { value:"GW", label:"Guinea-Bissau"}, { value:"GY", label:"Guyana"}, { value:"HT", label:"Haiti"}, { value:"HN", label:"Honduras"}, { value:"HK", label:"Hong Kong"}, { value:"HU", label:"Hungary"}, { value:"IS", label:"Iceland"}, { value:"IN", label:"India"}, { value:"ID", label:"Indonesia"}, { value:"IR", label:"Iran"}, { value:"IQ", label:"Iraq"}, { value:"IE", label:"Ireland"}, { value:"IL", label:"Israel"}, { value:"IT", label:"Italy"}, { value:"JM", label:"Jamaica"}, { value:"JP", label:"Japan"}, { value:"JO", label:"Jordan"}, { value:"KZ", label:"Kazakhstan"}, { value:"KE", label:"Kenya"}, { value:"KI", label:"Kiribati"}, { value:"KW", label:"Kuwait"}, { value:"KG", label:"Kyrgyzstan"}, { value:"LA", label:"Laos"}, { value:"LV", label:"Latvia"}, { value:"LB", label:"Lebanon"}, { value:"LS", label:"Lesotho"}, { value:"LR", label:"Liberia"}, { value:"LY", label:"Libya"}, { value:"LI", label:"Liechtenstein"}, { value:"LT", label:"Lithuania"}, { value:"LU", label:"Luxembourg"}, { value:"MO", label:"Macau"}, { value:"MK", label:"Macedonia"}, { value:"MG", label:"Madagascar"}, { value:"MW", label:"Malawi"}, { value:"MY", label:"Malaysia"}, { value:"MV", label:"Maldives"}, { value:"ML", label:"Mali"}, { value:"MT", label:"Malta"}, { value:"MH", label:"Marshall Islands"}, { value:"MQ", label:"Martinique"}, { value:"MR", label:"Mauritania"}, { value:"MU", label:"Mauritius"}, { value:"YT", label:"Mayotte"}, { value:"MX", label:"Mexico"}, { value:"FM", label:"Micronesia"}, { value:"MD", label:"Moldova"}, { value:"MC", label:"Monaco"}, { value:"MN", label:"Mongolia"}, { value:"MS", label:"Montserrat"}, { value:"MA", label:"Morocco"}, { value:"MZ", label:"Mozambique"}, { value:"MM", label:"Myanmar (Burma)"}, { value:"NA", label:"Namibia"}, { value:"NR", label:"Nauru"}, { value:"NP", label:"Nepal"}, { value:"NL", label:"Netherlands"}, { value:"AN", label:"Netherlands Antilles"}, { value:"NC", label:"New Caledonia"}, { value:"NZ", label:"New Zealand"}, { value:"NI", label:"Nicaragua"}, { value:"NE", label:"Niger"}, { value:"NG", label:"Nigeria"}, { value:"NU", label:"Niue"}, { value:"NF", label:"Norfolk Island"}, { value:"KP", label:"North Korea"}, { value:"NO", label:"Norway"}, { value:"OM", label:"Oman"}, { value:"PK", label:"Pakistan"}, { value:"PW", label:"Palau"}, { value:"PA", label:"Panama"}, { value:"PG", label:"Papua New Guinea"}, { value:"PY", label:"Paraguay"}, { value:"PE", label:"Peru"}, { value:"PH", label:"Philippines"}, { value:"PN", label:"Pitcairn"}, { value:"PL", label:"Poland"}, { value:"PT", label:"Portugal"}, { value:"PR", label:"Puerto Rico"}, { value:"QA", label:"Qatar"}, { value:"RE", label:"Reunion"}, { value:"RO", label:"Romania"}, { value:"RU", label:"Russia"}, { value:"RW", label:"Rwanda"}, { value:"SH", label:"Saint Helena"}, { value:"KN", label:"Saint Kitts and Nevis"}, { value:"LC", label:"Saint Lucia"}, { value:"SM", label:"San Marino"}, { value:"SA", label:"Saudi Arabia"}, { value:"SN", label:"Senegal"}, { value:"SC", label:"Seychelles"}, { value:"SL", label:"Sierra Leone"}, { value:"SG", label:"Singapore"}, { value:"SK", label:"Slovak Republic"}, { value:"SI", label:"Slovenia"}, { value:"SB", label:"Solomon Islands"}, { value:"SO", label:"Somalia"}, { value:"ZA", label:"South Africa"}, { value:"GS", label:"South Georgia"}, { value:"KR", label:"South Korea"}, { value:"ES", label:"Spain"}, { value:"LK", label:"Sri Lanka"}, { value:"SD", label:"Sudan"}, { value:"SR", label:"Suriname"}, { value:"SZ", label:"Swaziland"}, { value:"SE", label:"Sweden"}, { value:"CH", label:"Switzerland"}, { value:"SY", label:"Syria"}, { value:"TW", label:"Taiwan"}, { value:"TJ", label:"Tajikistan"}, { value:"TZ", label:"Tanzania"}, { value:"TH", label:"Thailand"}, { value:"TG", label:"Togo"}, { value:"TK", label:"Tokelau"}, { value:"TO", label:"Tonga"}, { value:"TT", label:"Trinidad and Tobago"}, { value:"TN", label:"Tunisia"}, { value:"TR", label:"Turkey"}, { value:"TM", label:"Turkmenistan"}, { value:"TC", label:"Turks and Caicos Islands"}, { value:"TV", label:"Tuvalu"}, { value:"UG", label:"Uganda"}, { value:"UA", label:"Ukraine"}, { value:"AE", label:"United Arab Emirates"}, { value:"UK", label:"United Kingdom"}, { value:"US", label:"United States"}, { value:"UY", label:"Uruguay"}, { value:"UZ", label:"Uzbekistan"}, { value:"VU", label:"Vanuatu"}, { value:"VA", label:"Vatican City (Holy See)"}, { value:"VE", label:"Venezuela"}, { value:"VN", label:"Vietnam"}, { value:"VG", label:"Virgin Islands (British)"}, { value:"VI", label:"Virgin Islands (US)"}, { value:"WF", label:"Wallis and Futuna Islands"}, { value:"EH", label:"Western Sahara"}, { value:"WS", label:"Western Samoa"}, { value:"YE", label:"Yemen"}, { value:"YU", label:"Yugoslavia"}, { value:"ZM", label:"Zambia"}, { value:"ZW", label:"Zimbabwe"} ]; $("#countries").jqxListBox({ checkboxes: true, source: countries, height: 300, width: 250}); $("#countries").bind('checkChange', function(event) { if (event.args) { var checkedItems = ""; var items = $("#countries").jqxListBox('getCheckedItems'); $.each(items, function (index) { checkedItems += this.value + ", "; }); $("#hiddenValue").val(checkedItems); } }); }); </script> <div style="font-size: 13px; font-family: Verdana;"> <form class="form" id="form" target="form-iframe" method="post" action="checkedlistbox.php" style="font-size: 13px; font-family: Verdana; width: 650px;"> <div> <h3>Select Countries from the List</h3> </div> <div name="countries" id="countries"></div> <input type="hidden" id="hiddenLabel" name="hiddenLabel" value="" /> <input type="hidden" id="hiddenValue" name="hiddenValue" value="" /> <input style="margin-top: 10px;" type="submit" value="Submit" id="sendButton" /> </form> </div> <br/> <div> <iframe id="form-iframe" name="form-iframe" class="demo-iframe" frameborder="0"></iframe> </div> </body> </html>