Q:

How to load all the data at once when select multiple check boxes - Jquery AJAX

I have AJAX load country city list as below screen shot. When continent is checked it will load it countries from the database.

Here when checked another continent it will load that related countries. But I want to keep both country list and show all countries.
My current js code is 
$("#continent input[type='checkbox']").click(function() {
                     if($(this).is(':checked')) {
                        var checked = $(this).val();
                        var type = 'country';
                        //alert(checked);
                        $.ajax({
                            type: "POST",
                            url: '<?php echo JURI::root(); ?>index.php?option=com_ajaxwork',
                            data: {country : checked, type :type},
                            beforeSend: function() {
                                $('#countries').html("<img src='/images/loading.gif' />");
                            },
                            success: function(e) {
                                $('#countries').html(e);
                            },
                            error: function() {
                                alert('it broke');
                            },
                            complete: function() {
                             //   alert('it completed');
                            }
                        });
                    }
                    });

And php code is
    $countinent_id = $_POST['country'];
   $query2 = "SELECT * FROM #__my_country WHERE continent_id = $countinent_id"; 
   $db2 =& JFactory::getDBO();
    $db2->setQuery($query2);        
    $rows2 = $db2->loadObjectList();

    foreach ($rows2 as $value) {  
        print('
            <fieldset class="loc_field">
        <label>'.$value->country_name .'</label>
        <input type="checkbox" name="jform[supplier_country_covered]['.$value->country_id.']" value="'.$value->country_id.'">
            </fieldset>
                ');
    }

How do I load all countries at once when checked multiple check boxes at first column. 
Thanks.

A:

You can try adding continent id as a class to fieldset in your php code. 
Then change your jQuery code to
$("#continent input[type='checkbox']").click(function () {
if ($(this).is(':checked')) {
    var checked = $(this).val();
    var type = 'country';
    //alert(checked);
    $.ajax({
        type: "POST",
        url: '<?php echo JURI::root(); ?>index.php?option=com_ajaxwork',
        data: { country: checked, type: type },
        beforeSend: function () {
         //you have to show this some other way
         //   $('#countries').html("<img src='/images/loading.gif' />");
        },
        success: function (e) {
            $('#countries').append(e);
        },
        error: function () {
            alert('it broke');
        },
        complete: function () {
            //   alert('it completed');
        }
    });
}
else {
    var checked = $(this).val();
    $('.' + checked).remove();
}

});

