选中多个复选框时如何一次加载所有数据-Jquery AJAX

Question

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.

Answer 1

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

});